詳解Angular組件之投影
概述
運(yùn)行時(shí)動(dòng)態(tài)改變組件模版的內(nèi)容。沒路由那么復(fù)雜，只是一段html，沒有業(yè)務(wù)邏輯。
ngContent指令將父組件模版上的任意片段投影到子組件上。
一、簡(jiǎn)單例子
1、子組件中使用<ng-content>指令來(lái)標(biāo)記投影點(diǎn)
<div class="wrapper"> <h2>我是子組件</h2> <div>這個(gè)div定義在子組件中</div> <ng-content></ng-content> </div>
2、父組件中把要投影到子組件的投影點(diǎn)的html片段寫到子組件的標(biāo)簽中
<div class="wrapper">
<h2>我是父組件</h2>
<div>這個(gè)div定義在父組件中</div>
<app-child2>
<div>這個(gè)div是父組件投影到子組件中</div>
</app-child2>
</div>
效果：
子組件加樣式：
.wrapper{
background: lightgreen;
}
父組件加樣式：
.wrapper{
background: cyan;
}
二、多個(gè)<ng-content>投影點(diǎn)
子組件：
<div class="wrapper"> <h2>我是子組件</h2> <ng-content selecter=".header"></ng-content> <div>這個(gè)div定義在子組件中</div> <ng-content selecter=".footer"></ng-content> </div>
父組件：
<div class="wrapper">
<h2>我是父組件</h2>
<div>這個(gè)div定義在父組件中</div>
<app-child2>
<div class="header">這是頁(yè)頭，這個(gè)div是父組件投影到子組件中,title是{{title}}</div>
<div class="footer">這是頁(yè)腳，這個(gè)div是父組件投影到子組件中</div>
</app-child2>
</div>
頁(yè)頭和頁(yè)腳被投影到子組件中，同時(shí)title也被投影過(guò)去。
父組件模版中投影內(nèi)容中插值表達(dá)式只能綁定父組件中的屬性，雖然內(nèi)容會(huì)被投影到子組件中去。
三、Angular屬性綁定的方式插入html
在父組件模版中加一行：
<div [innerHTML]="divContent"></div>
父組件中加一個(gè)divContent屬性，內(nèi)容就是一段html片段。
divContent="<div>屬性綁定綁innerHTML</div>";
效果
四、對(duì)比ngContent指令和屬性綁定innerHTML方式
[innerHTML]是瀏覽器特定的API。
ngContent指令平臺(tái)無(wú)關(guān)。可綁定多個(gè)投影點(diǎn)。
優(yōu)先考慮ngContent指令
以上就是詳解Angular組件之投影的詳細(xì)內(nèi)容，更多關(guān)于Angular組件之投影的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用Raygun來(lái)自動(dòng)追蹤AngularJS中的異常
這篇文章主要介紹了使用Raygun來(lái)自動(dòng)追蹤AngularJS中的異常,AngularJS是一款高人氣的JavaScript庫(kù),需要的朋友可以參考下2015-06-06
對(duì)angularJs中自定義指令replace的屬性詳解
今天小編就為大家分享一篇對(duì)angularJs中自定義指令replace的屬性詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
angularjs實(shí)現(xiàn)下拉列表的選中事件示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)下拉列表的選中事件示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
詳解如何使用webpack+es6開發(fā)angular1.x
本篇文章主要介紹了詳解如何使用webpack+es6開發(fā)angular1.x，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
詳解Angular項(xiàng)目中共享模塊的實(shí)現(xiàn)
本文主要介紹了Angular的共享模塊的實(shí)現(xiàn)，對(duì)此感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-05-05
詳解angular分頁(yè)插件tm.pagination二次觸發(fā)問(wèn)題解決方案
這篇文章主要介紹了詳解angular分頁(yè)插件tm.pagination二次觸發(fā)問(wèn)題解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
AngularJS實(shí)現(xiàn)根據(jù)變量改變動(dòng)態(tài)加載模板的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)根據(jù)變量改變動(dòng)態(tài)加載模板的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了AngularJS動(dòng)態(tài)加載模板的主要操作技巧與模板實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-11-11
深入探究AngularJs之$scope對(duì)象（作用域）
本篇文章主要介紹了深入探究AngularJs之$scope對(duì)象（作用域），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)
下面小編就為大家?guī)?lái)一篇AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
本篇文章主要介紹了AngularJS ng-repeat遍歷輸出的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06