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

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

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

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

父组件anchor.component.html：

我是嵌入的外部内容，相当于vue的slot
我是ng content 内容投影
ng content测试
 
 

子组件：slot.component.html

效果：

针对性投影(具名插槽)

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

父组件anchor.component.html：

我是嵌入的外部内容，相当于vue的slot
我是ng content 内容投影
ng content测试
 
 

子组件：slot.component.html

效果截图：

ngProjectAs

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

父组件anchor.component.html：

div
span
 
 

子组件：slot.component.html

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