angular6.x中ngTemplateOutlet指令的使用示例
在使用angular進(jìn)行開發(fā)的時(shí)候,通過屬性綁定向組件內(nèi)部傳值的方式,有時(shí)候并不能完全滿足需求,比如我們寫了一個(gè)公共組件,但是某個(gè)模板使用這個(gè)公共組件的時(shí)候,需要在其內(nèi)部添加一些標(biāo)簽內(nèi)容,這種情況下,除了使用ngIf/ngSwitch預(yù)先在組件內(nèi)部定義之外,就可以利用ngTemplateOutlet指令向組件傳入內(nèi)容.
ngTemplateOutlet指令類似于angularjs中的ng-transclude,vuejs中的slot.
ngTemplateOutlet是結(jié)構(gòu)型指令,需要綁定一個(gè)TemplateRef類型的實(shí)例.
使用方式如下:
@Component({
selector: 'app',
template: `
<h1>Angular's template outlet and lifecycle example</h1>
<app-content [templateRef]="nestedComponentRef"></app-content>
<ng-template #nestedComponentRef let-name>
<span>Hello {{name}}!</span>
<app-nested-component></app-nested-component>
</ng-template>
`,
})
export class App {}
@Component({
selector: 'app-content',
template: `
<button (click)="display = !display">Toggle content</button>
<template
*ngIf="display"
*ngTemplateOutlet="templateRef context: myContext">
</template>
`,
})
export class Content {
display = false;
@Input() templateRef: TemplateRef;
myContext = {$implicit: 'World', localSk: 'Svet'};
}
@Component({
selector: 'app-nested-component',
template: `
<b>Hello World!</b>
`,
})
export class NestedComponent implements OnDestroy, OnInit {
ngOnInit() {
alert('app-nested-component initialized!');
}
ngOnDestroy() {
alert('app-nested-component destroyed!');
}
}
代碼中除了跟組件外定義了兩個(gè)組件
- 容器組件:app-content
- 傳遞進(jìn)去的內(nèi)容組件:app-nested-component
app-content組件接收一個(gè)TemplateRef類型的輸入屬性templateRef,并在模板中將其綁定到了ngTemplateOutlet指令,當(dāng)組件接收到templateRef屬性時(shí),就會將其渲染到ngTemplateOutlet指令所在的位置.
上例中,app-content組件templateRef屬性的來源,是在根組件的模板內(nèi),直接通過#符號獲取到了app-nested-component組件所在<ng-template>的引用并傳入的.
在實(shí)際應(yīng)用中,除了這種方式,也可以直接在組件內(nèi)部獲取TemplateRef類型的屬性并綁定到ngTemplateOutlet指令.
比如在容器組件為模態(tài)框的情況下,并不能通過模板傳值,就可以使用下面這種方式:
@ViewChild('temp') temp: TemplateRef<any>
openDialog(){
this.dialog.open(ViewDialogComponent, {data: this.temp)
}
在容器組件中還可以定義被傳遞內(nèi)容的上下文(上例app-content組件中的myContext屬性),其中的$implicit屬性作為默認(rèn)值,在被傳遞的內(nèi)容中可以以重命名的方式訪問(上例let-name),對于上下文中其他的屬性,就需要通過let-屬性名的方式訪問了.
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)圖片懶加載實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例，需要的朋友可以參考下2015-12-12
AngularJS中的Module類負(fù)責(zé)定義應(yīng)用如何啟動(dòng)，它還可以通過聲明的方式定義應(yīng)用中的各個(gè)片段。我們來看看它是如何實(shí)現(xiàn)這些功能的2015-12-12
AngularJS與BootStrap模仿百度分頁的示例代碼
分頁在很多時(shí)候都能用到，這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
淺談關(guān)于angularJs中使用$.ajax的注意點(diǎn)
本篇文章主要介紹了關(guān)于angularJs中使用$.ajax的注意點(diǎn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲的實(shí)例
今天小編就為大家分享一篇angularJs中json數(shù)據(jù)轉(zhuǎn)換與本地存儲的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了AngularJS中下拉框的基本用法,結(jié)合具體實(shí)例形式分析了AngularJS下拉框的元素綁定、選中及顯示等功能實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
Angular應(yīng)用里異步打開對話框技術(shù)詳解
這篇文章主要為大家介紹了Angular應(yīng)用里異步打開對話框技術(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
angularJs select綁定的model取不到值的解決方法
今天小編就為大家分享一篇angularJs select綁定的model取不到值的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法，文中通過示例代碼和圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12