詳解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)文章
angular6.0開發(fā)教程之如何安裝angular6.0框架
這篇文章主要介紹了angular6.0開發(fā)教程之如何安裝angular6.0框架，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了AngularJS API之equal比較對象的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular 2父子組件之間共享服務通信的實現(xiàn)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間共享服務通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要給大家介紹了關(guān)于Angular.js指令學習中一些重要屬性的用法教程，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
簡介可以自動完成UI的AngularJS工具angular-smarty
這篇文章主要介紹了簡介可以自動完成UI的AngularJS工具angular-smarty,包括其中隔離作用域綁定指令符和promise的使用,需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了關(guān)于angular中post請求處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-06-06
這篇文章主要介紹了Angular2學習筆記——詳解NgModule模塊,現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
詳解為Angular.js內(nèi)置$http服務添加攔截器的方法
所謂攔截器就是在目標達到目的地之前對其進行處理以便處理結(jié)果更加符合我們的預期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器，每個攔截器都是實現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務添加攔截器的方法。2016-12-12
大家在使用angularjs的時候，很容易忽略AngularJS自帶指令的作用域問題，有一些指令會產(chǎn)生獨立的自己作用域，造成子級無法與父級作用域雙向綁定的問題。下面我們來看看這些問題，有需要的可以參考借鑒。2016-09-09
這篇文章主要介紹了angular2+nodejs實現(xiàn)圖片上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03