雖然我們可以通過使用 ViewContainerRef 將 ElementRef創建的視圖插入指定的位置,但是仍然希望有某中快捷的方式幫我們實現。
ngTemplateOutlet與ngComponentOutlet 就是幫我們干這事的。
ngTemplateOutlet
插入 ng-template 創建的內嵌視圖。
最簡單的例子如下:
<div *ngTemplateOutlet="tpl1"></div> <ng-template #tpl1> <span>I am span in template {{title}}</span> </ng-template>
按照官方文檔,其語法知識如下: *ngTemplateOutlet = "templateRefExp; content: contentExp "
templateRefExp: ng-template 元素的#ID
contextExp:
1、可空參數;
2、可以在模版中使用 let-key 語句進行綁定; 這個key,是我們在HTML模版綁定顯示的key,即 {{key}} 。
3、使用 $implicit 這個key會把對應的值設置為默認值;
因為我們會為content指定一個對象,每個對象可能有一個或多個值;
如果這個對象,是一個值,則不需顯示指定名稱,如 student : { name: 'jack' } ,可以用 student: { $implicit: 'jack' };
在 ng-template 中也不必使用 let-showName = "name", 只需要 let-showName 即可。
如下例子:
HTML文件:
<ng-container *ngTemplateOutlet="tplStu; context: student"></ng-container> <ng-template #tplStu let-name let-ageHTML="age">hello {{name}},your age is {{ageHTML}}</ng-template> .ts文件 student = { $implicit: 'jack' , age: '19'};