詳解Angular組件之投影
概述
運(yùn)行時(shí)動(dòng)態(tài)改變組件模版的內(nèi)容。沒路由那么復(fù)雜，只是一段html，沒有業(yè)務(wù)邏輯。
ngContent指令將父組件模版上的任意片段投影到子組件上。
一、簡(jiǎn)單例子
1、子組件中使用<ng-content>指令來標(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也被投影過去。
父組件模版中投影內(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)無關(guān)?？山壎ǘ鄠€(gè)投影點(diǎn)。
優(yōu)先考慮ngContent指令
以上就是詳解Angular組件之投影的詳細(xì)內(nèi)容，更多關(guān)于Angular組件之投影的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
angular6.0開發(fā)教程之如何安裝angular6.0框架
這篇文章主要介紹了angular6.0開發(fā)教程之如何安裝angular6.0框架，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
AngularJS equal比較對(duì)象實(shí)例詳解
這篇文章主要介紹了AngularJS API之equal比較對(duì)象的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular 2父子組件之間共享服務(wù)通信的實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間共享服務(wù)通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-07-07
Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程
這篇文章主要給大家介紹了關(guān)于Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
簡(jiǎn)介可以自動(dòng)完成UI的AngularJS工具angular-smarty
這篇文章主要介紹了簡(jiǎn)介可以自動(dòng)完成UI的AngularJS工具angular-smarty,包括其中隔離作用域綁定指令符和promise的使用,需要的朋友可以參考下2015-06-06
這篇文章主要給大家介紹了關(guān)于angular中post請(qǐng)求處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Angular2學(xué)習(xí)筆記——詳解NgModule模塊
這篇文章主要介紹了Angular2學(xué)習(xí)筆記——詳解NgModule模塊,現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達(dá)到目的地之前對(duì)其進(jìn)行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器，每個(gè)攔截器都是實(shí)現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。2016-12-12
詳細(xì)談?wù)凙ngularJS的子級(jí)作用域問題
大家在使用angularjs的時(shí)候，很容易忽略AngularJS自帶指令的作用域問題，有一些指令會(huì)產(chǎn)生獨(dú)立的自己作用域，造成子級(jí)無法與父級(jí)作用域雙向綁定的問題。下面我們來看看這些問題，有需要的可以參考借鑒。2016-09-09
angular2+nodejs實(shí)現(xiàn)圖片上傳功能
這篇文章主要介紹了angular2+nodejs實(shí)現(xiàn)圖片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03