溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在使用angular進行開發的時候,通過屬性綁定向組件內部傳值的方式,有時候并不能完全滿足需求,比如我們寫了一個公共組件,但是某個模板使用這個公共組件的時候,需要在其內部添加一些標簽內容,這種情況下,除了使用ngIf/ngSwitch預先在組件內部定義之外,就可以利用ngTemplateOutlet指令向組件傳入內容.
ngTemplateOutlet指令類似于angularjs中的ng-transclude,vuejs中的slot.
ngTemplateOutlet是結構型指令,需要綁定一個TemplateRef類型的實例.
使用方式如下:
@Component({
selector: 'app',
template: `
<h2>Angular's template outlet and lifecycle example</h2>
<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!');
}
}
代碼中除了跟組件外定義了兩個組件
app-content組件接收一個TemplateRef類型的輸入屬性templateRef,并在模板中將其綁定到了ngTemplateOutlet指令,當組件接收到templateRef屬性時,就會將其渲染到ngTemplateOutlet指令所在的位置.
上例中,app-content組件templateRef屬性的來源,是在根組件的模板內,直接通過#符號獲取到了app-nested-component組件所在<ng-template>的引用并傳入的.
在實際應用中,除了這種方式,也可以直接在組件內部獲取TemplateRef類型的屬性并綁定到ngTemplateOutlet指令.
比如在容器組件為模態框的情況下,并不能通過模板傳值,就可以使用下面這種方式:
@ViewChild('temp') temp: TemplateRef<any>
openDialog(){
this.dialog.open(ViewDialogComponent, {data: this.temp)
}
在容器組件中還可以定義被傳遞內容的上下文(上例app-content組件中的myContext屬性),其中的$implicit屬性作為默認值,在被傳遞的內容中可以以重命名的方式訪問(上例let-name),對于上下文中其他的屬性,就需要通過let-屬性名的方式訪問了.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
