?

?

1 準備工作

　　1.1 搭建angular環(huán)境

　　　　技巧01：本博文基于angular5

　　1.3 創(chuàng)建一個angular項目

　　　　技巧01：根據(jù)業(yè)務劃分模塊，每個模塊都設定一個主組件

　　　　技巧02：利用路由實現(xiàn)模塊的懶加載

?

2 投影的應用場景

　　2.1 需求

　　　　父組件如何動態(tài)的向子組件進行傳值操作

　　2.2 解決

　　　　》利用輸入屬性實現(xiàn)：子組件定義一個輸入屬性，父組件在使用子組件時就可以通過子組件的輸入屬性來向子組件傳值

　　　　》利用路由傳參實現(xiàn)：子組件作為父組件的一個子路由對應的組件，父組件通過路由參數(shù)向子組件傳遞數(shù)據(jù)

　　　　》利用服務實現(xiàn)：把服務看做是兩個組件之間的橋梁，從而實現(xiàn)傳參操作

　　　　》投影實現(xiàn)：父組件在使用子組件的時候將需要傳給子組件的數(shù)據(jù)作為子組件元素的內容卸載子組件標簽里面即可

　　2.3 投影的優(yōu)點

　　　　》進行動態(tài)傳值，可以將一個復雜的組件作為內容投影到子組件中

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

　　2.4 投影的應用場景

　　　　》自定義組件標簽的嵌套使用

　　　　》利用自定義組件標簽包裝原生的HTML標簽

?

3 編程步驟

　　3.0 ng-content 和 ng-container 的妙用

　　　　3.0.1 ng-content?

　　　　　　ng-content 通常在投影中使用：當父組件需要向子組件投影數(shù)據(jù)時必須指定將數(shù)據(jù)投影到子組件的哪個位置，這時候就可以利用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 解決辦法

　　　　　　》創(chuàng)建自定義組件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 解決

　　　　　　》創(chuàng)建自定義組件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

總結

以上是生活随笔為你收集整理的Angular26 ng-content和ng-container、投影的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。