?

?

1 準(zhǔn)備工作

　　1.1 搭建angular環(huán)境

　　　　技巧01：本博文基于angular5

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

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

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

?

2 投影的應(yīng)用場(chǎng)景

　　2.1 需求

　　　　父組件如何動(dòng)態(tài)的向子組件進(jìn)行傳值操作

　　2.2 解決

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

　　　　》利用路由傳參實(shí)現(xiàn)：子組件作為父組件的一個(gè)子路由對(duì)應(yīng)的組件，父組件通過(guò)路由參數(shù)向子組件傳遞數(shù)據(jù)

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

　　　　》投影實(shí)現(xiàn)：父組件在使用子組件的時(shí)候?qū)⑿枰獋鹘o子組件的數(shù)據(jù)作為子組件元素的內(nèi)容卸載子組件標(biāo)簽里面即可

　　2.3 投影的優(yōu)點(diǎn)

　　　　》進(jìn)行動(dòng)態(tài)傳值，可以將一個(gè)復(fù)雜的組件作為內(nèi)容投影到子組件中

　　　　》解決自定義組件嵌套問(wèn)題【沒(méi)有投影功能的自定義組件不能進(jìn)行嵌套操作】

　　2.4 投影的應(yīng)用場(chǎng)景

　　　　》自定義組件標(biāo)簽的嵌套使用

　　　　》利用自定義組件標(biāo)簽包裝原生的HTML標(biāo)簽

?

3 編程步驟

　　3.0 ng-content 和 ng-container 的妙用

　　　　3.0.1 ng-content?

　　　　　　ng-content 通常在投影中使用：當(dāng)父組件需要向子組件投影數(shù)據(jù)時(shí)必須指定將數(shù)據(jù)投影到子組件的哪個(gè)位置，這時(shí)候就可以利用ng-content標(biāo)簽來(lái)做一個(gè)占位符。

　　　　3.0.1 ng-container

　　　　　　ng-container 通常在結(jié)構(gòu)性指令中使用：當(dāng)需要在一個(gè)組件運(yùn)用兩條結(jié)構(gòu)性指令時(shí)是會(huì)報(bào)錯(cuò)的，這時(shí)就可以利用ng-container標(biāo)簽對(duì)原組件做一層封裝，再在ng-container標(biāo)簽上使用第一條結(jié)構(gòu)性指令，在原組件標(biāo)簽上使用第二條結(jié)構(gòu)性指令，；例如：

　　　　　　　　在一個(gè)標(biāo)簽中使用兩條結(jié)構(gòu)性指令時(shí)的錯(cuò)誤信息如下：

　　　　　　　　解決辦法

　　3.1 投影一塊內(nèi)容

　　　　3.1.1 需求

　　　　　　在使用bootstrap3提供的panel組件時(shí)很麻煩，每次都需要寫(xiě)4個(gè)div而且還要給各個(gè)div設(shè)定不同的樣式；如何利用一個(gè)自定義組件對(duì)其進(jìn)行一次封裝

　　　　3.1.2 bootstrap3的panel組件原裝使用

　　　　3.1.2 解決辦法

　　　　　　》創(chuàng)建自定義組件app-panel，組件的視圖中利用 ng-content 進(jìn)行站位處理

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

<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組件時(shí)app-panel元素的內(nèi)容的class屬性保持一致，但是select的值如果前面有一個(gè)點(diǎn)的話(huà)表示是通過(guò)類(lèi)進(jìn)行對(duì)應(yīng)，如果沒(méi)有點(diǎn)的話(huà)表示通過(guò)標(biāo)簽進(jìn)行對(duì)應(yīng)【PS: 此處是通過(guò)類(lèi)進(jìn)行對(duì)應(yīng)】，如果使用標(biāo)簽進(jìn)行對(duì)應(yīng)，在使用app-panel組件時(shí)對(duì)應(yīng)的app-panel元素的內(nèi)容就可以不用寫(xiě)class屬性了。

　　3.2 投影多塊內(nèi)容

　　　　3.2.1 需求

　　　　　　在使用bootstrap3提供的panel組件時(shí)很麻煩，每次都需要寫(xiě)4個(gè)div而且還要給各個(gè)div設(shè)定不同的樣式；如何利用一個(gè)自定義組件對(duì)其進(jìn)行一次封裝

　　　　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：和利用標(biāo)簽名進(jìn)行對(duì)應(yīng)是一樣的，只不過(guò)這時(shí)候在設(shè)置ng-content的select屬性時(shí)是自定義組件的標(biāo)簽名而已

　　　　》自定義app-panel組件

　　　　》自定義app-test03標(biāo)簽

　　　　》使用自定義ng-panel標(biāo)簽

?

?

?

?

?

?

?

　　　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/NeverCtrl-C/p/9250614.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。