虽然咱们能够经过使用 ViewContainerRef 将 ElementRef建立的视图插入指定的位置,可是仍然但愿有某中快捷的方式帮咱们实现。spa
ngTemplateOutlet与ngComponentOutlet 就是帮咱们干这事的。code
ngTemplateOutlet对象
插入 ng-template 建立的内嵌视图。
blog
最简单的例子以下:ci
<div *ngTemplateOutlet="tpl1"></div> <ng-template #tpl1> <span>I am span in template {{title}}</span> </ng-template>
按照官方文档,其语法知识以下: *ngTemplateOutlet = "templateRefExp; content: contentExp "文档
templateRefExp: ng-template 元素的#IDit
contextExp:class
一、可空参数; 语法
二、能够在模版中使用 let-key 语句进行绑定; 这个key,是咱们在HTML模版绑定显示的key,即 {{key}} 。im
三、使用 $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'};