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