angular中动态传入模板-ngTemplateOutlet

在写公共组件的时候可以通过ng-content实现类似vue的slot的效果，但是使用ng-content不能动态的传参，所以在写组件的时候会受到很大的限制，而ngTemplateOutlet可以动态传参

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'};