Angular 插槽/内容投影

Angular中的内容投影有三种：
1.单槽内容投影（普通插槽）
子组件中的<ng-content>作为一个占位，由父组件传入的内容把<ng-content>替换掉如父组件：<child>我是父组件提供的单槽内容投影</child>子组件<div>我是子组件<ng-content></ng-content></div>

2.多插槽内容投影(多个有名字的插槽)

必须指定希望投影内容出现在的位置，父组件中的dom元素需要和子组件定义的选择器匹配。如子组件：`<div>
<ng-content select="label"></ng-content>
<ng-content select=".my-class"></ng-content>
<ng-content select="[content]"></ng-content></div>`
父组件：`<child><label>我是通过标签选择投影位置</label>
<div class="my-class">我是通过class选择投影位置</div>
<div content>我是通过属性选择投影位置</div></child>`

注意：select不能动态修改。

3.有条件的内容投影(有条件地渲染内容或多次渲染内容时使用)
父组件中定义<ng-template>,子组件定义<ng-container>来接收父组件传入的模板。先了解一下ngTemplateOutlet、@ContentChild、ng-template的用法。

1. ngTemplateOutlet：根据一个提前备好的TemplateRef插入一个内嵌视图
2. @ContentChild：用于从内容 DOM 获取与此选择器匹配的第一个元素或指令,我们用他来获取父组件提供的TemplateRef
3. ng-template一个模板元素，由父组件定义传入子组件
   父组件代码如下：
   子组件代码如下：