我们在使用vue时一定用到过slot，这个东西很好用，那angular是否也有类似的东东呢？
答案是肯定的，不过在讲这个之前，我们先来搞明白一个特殊标签。
ng-container
ng-container是angular的一个特殊标签，有点类似ng-template，但二者的用法不一样。
最大的不同之处在于，ng-template包裹的内容无法展示出来，而ng-container却可以：
<ul>
<ng-container *ngFor="let item of listdata">
<li>
{{item.id}}---{{item.name}}
</li>
</ng-container>
</ul>
编译后发现，ng-container并创建任何节点，只是作为一个逻辑tag来使用。
有时为了代码清晰明了，我们并不希望将*ngFor的逻辑放在实际的模板标签上，这时ng-container就派上了用场。
模板片段ngTemplateOutlet
这个语法糖实现的是模板片段，跟slot有一点像。
具名片段
<ng-template #header>
Hello, header!
</ng-template>
<ng-template #footer>
Hello, footer!
</ng-template>
<div [ngTemplateOutlet]="header"></div>
<div [ngTemplateOutlet]="footer"></div>
作用域片段
作用域片段需要声明上下文，以便渲染代码片段的时候绑定相关字段。
<!--ng-container容器下嵌入代码片段，id是tplStu，上下文context是student-->
<ng-container *ngTemplateOutlet="tplStu; context: student">
</ng-container>
<ng-template #tplStu let-name let-ageHTML="age">
hello {{name}},your age is {{ageHTML}}
</ng-template>
let-name这种写法有点奇怪，其实就是let name="xxx"的意思,如果后面不跟具体的值，就是代表默认值。
let-ageHTML = "age",翻译过来就是let ageHTML = "age"。
name和age两个字段，绑定的上下文context就是student，需要在ts文件声明，最终访问的是student.name和student.age。
ts文件：
student = { $implicit: 'jack' , age: '19'};//$implicit的英文愿意是含蓄的，引申为默认值的意思，本例对应的就是let-name
插槽ng-content
angular真正的插槽是ng-content，一般是用于组件之间的信息传递。
匿名插槽
father.component.html:
<app-child>
<h2>这是一个匿名插槽</h2>
</app-child>
child.component.html:
<div style="background:yellow">
<ng-content></ng-content>
</div>
匿名插槽很简单，利用ng-content这个特殊tag占个坑即可搞定。
具名插槽
ng-content可以加select关键字，就是具名插槽。
father.component.html:
<app-child>
<div ngProjectAs="demo1">
<h1>我是demo1</h1>
</div>
<div class="demo2">
<h2 style="color:yellow;">class为"demo2"</h2>
</div>
<div name="demo3">
<h3>name为"demo3"</h3>
</div>
<app-other></app-other>
</app-child>
这个具名插槽十分强大，子组件也能传递。
child.component.html:
<ng-content select="demo1"></ng-content>
<ng-content select=".demo2"></ng-content>
<ng-content select="[name=demo3]"></ng-content>
<!--子组件渲染-->
<ng-content select="app-other"></ng-content>
作用域插槽
要实现作用域插槽，还是得借助ngTemplateOutlet的力量，ng-content无法满足需求。
father.component.html:
<app-child [myslot]="slotTpl"></app-child>
<ng-template #slotTpl let-name let-ageHTML="age">
hello {{name}},your age is {{ageHTML}}
</ng-template>
然后子组件需要接收信息，用@Input()装饰器可以搞定。
child.component.ts:
@Input() myslot:any;//严格类型是TemplateRef<any>
...
student = { $implicit: 'jack' , age: '19'};//定义上下文
然后在子组件模板中渲染出来即可。
child.component.html:
<ng-container *ngTemplateOutlet="myslot;context:student">
</ng-container>
