Angular26 ng-content和ng-container、投影的使用

1 準備工作

　　1.1 搭建angular環境

　　　　技巧01：本博文基于angular5

　　1.3 建立一個angular項目

　　　　技巧01：根據業務劃分子產品，每個子產品都設定一個主元件

　　　　技巧02：利用路由實作子產品的懶加載

2 投影的應用場景

　　2.1 需求

　　　　父元件如何動态的向子元件進行傳值操作

　　2.2 解決

　　　　》利用輸入屬性實作：子元件定義一個輸入屬性，父元件在使用子元件時就可以通過子元件的輸入屬性來向子元件傳值

　　　　》利用路由傳參實作：子元件作為父元件的一個子路由對應的元件，父元件通過路由參數向子元件傳遞資料

　　　　》利用服務實作：把服務看做是兩個元件之間的橋梁，進而實作傳參操作

　　　　》投影實作：父元件在使用子元件的時候将需要傳給子元件的資料作為子元件元素的内容解除安裝子元件标簽裡面即可

　　2.3 投影的優點

　　　　》進行動态傳值，可以将一個複雜的元件作為内容投影到子元件中

　　　　》解決自定義元件嵌套問題【沒有投影功能的自定義元件不能進行嵌套操作】

　　2.4 投影的應用場景

　　　　》自定義元件标簽的嵌套使用

　　　　》利用自定義元件标簽包裝原生的HTML标簽

3 程式設計步驟

　　3.0 ng-content 和 ng-container 的妙用

　　　　3.0.1 ng-content 

　　　　　　ng-content 通常在投影中使用：當父元件需要向子元件投影資料時必須指定将資料投影到子元件的哪個位置，這時候就可以利用ng-content标簽來做一個占位符。

　　　　3.0.1 ng-container

　　　　　　ng-container 通常在結構性指令中使用：當需要在一個元件運用兩條結構性指令時是會報錯的，這時就可以利用ng-container标簽對原元件做一層封裝，再在ng-container标簽上使用第一條結構性指令，在原元件标簽上使用第二條結構性指令，；例如：

　　　　　　　　在一個标簽中使用兩條結構性指令時的錯誤資訊如下：

　　　　　　　　解決辦法

　　3.1 投影一塊内容

　　　　3.1.1 需求

　　　　　　在使用bootstrap3提供的panel元件時很麻煩，每次都需要寫4個div而且還要給各個div設定不同的樣式；如何利用一個自定義元件對其進行一次封裝

　　　　3.1.2 bootstrap3的panel元件原裝使用

　　　　3.1.2 解決辦法

　　　　　　》建立自定義元件app-panel，元件的視圖中利用 ng-content 進行站位處理

　　　　　　　　技巧01：ng-content元素的select屬性的作用是避免投影錯誤用的

<div class="panel panel-primary">
  <div class="panel-heading">
    <span>自定義panel元件</span>
  </div>
  <div class="panel-body">
    <ng-content select=".body"></ng-content>
  </div>
  <div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div>
</div>      

View Code

 　　　　　　》使用自定義的app-panel元件

　　　　　　　　技巧01：定義app-panel元件視圖中ng-content的select屬性值必須和使用app-panel元件時app-panel元素的内容的class屬性保持一緻，但是select的值如果前面有一個點的話表示是通過類進行對應，如果沒有點的話表示通過标簽進行對應【PS: 此處是通過類進行對應】，如果使用标簽進行對應，在使用app-panel元件時對應的app-panel元素的内容就可以不用寫class屬性了。

　　3.2 投影多塊内容

　　　　3.2.1 需求

　　　　　　在使用bootstrap3提供的panel元件時很麻煩，每次都需要寫4個div而且還要給各個div設定不同的樣式；如何利用一個自定義元件對其進行一次封裝

　　　　3.2.2 解決

　　　　　　》建立自定義元件app-panel

<div class="panel panel-primary">
  <div class="panel-heading">
    <ng-content class="h4"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select=".body"></ng-content>
  </div>
  <div class="panel-footer">{{currentDate | date : "yyyy-MM-dd HH:mm:ss"}}</div>
</div>      

View Code

　　　　　　》使用自定義的app-panel元件

　　3.3 投影自定義元件

　　　　技巧01：和利用标簽名進行對應是一樣的，隻不過這時候在設定ng-content的select屬性時是自定義元件的标簽名而已

　　　　》自定義app-panel元件

　　　　》自定義app-test03标簽

　　　　》使用自定義ng-panel标簽

　　　　

轉載于:https://www.cnblogs.com/NeverCtrl-C/p/9250614.html