使用angular7的ng-content插槽进行组件内容投射

在实际的使用中，我们会用到内容投影，即插槽的概念。在vue中可以通过slot来标记插槽，从而达到从父组件向子组件传递显示内容。

在angular中，同样可以使用ng-content来实现与vue中的slot同样的功能和效果。

简单投影（单个插槽| 默认插槽| 匿名插槽）

父组件anchor.component.html：

<app-slot>
    <h2>我是嵌入的外部内容，相当于vue的slot</h2>
    <p>我是ng content 内容投影</p>
    <span>ng content测试</span>
</app-slot>

子组件：slot.component.html

<div>
    <ng-content></ng-content>
</div>

效果：

针对性投影(具名插槽)

针对性投影，相当于vue中slot的name属性和组件的slot属性的映射关系

父组件anchor.component.html：

<app-slot>
    <h2 class="slot">我是嵌入的外部内容，相当于vue的slot</h2>
    <p>我是ng content 内容投影</p>
    <span>ng content测试</span>
</app-slot>

子组件：slot.component.html

<div>
    <ng-content select="p"></ng-content>
    <hr>
    <ng-content select=".slot"></ng-content>
    <hr>
    <ng-content></ng-content>
</div>

效果截图：

ngProjectAs

通过ng-content的select属性可以指定html标签或者组件投射ng-content位置上来。但是呢有个限制条件。不管是select标签或者组件的名字、或者class、或者是属性他们都是作用在直接子节点上。还是用一个简单但额实例来说明

父组件anchor.component.html：

<app-slot>
    <ng-container ngProjectAs="div">
        <div>div</div>
        <span>span</span>
    </ng-container>
</app-slot>

子组件：slot.component.html

<div>
    <ng-content select="div"></ng-content>
</div>

总结：
ng-content支持一个 select 属性，可以让你在特定的地方投射具体的内容。该属性支持 CSS 选择器（标签选择器、类选择器、属性选择器、…）来匹配你想要的内容。如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。