Angular - 组件投影

投影
        在某些情况下，需要动态改变组件模板的内容，而这些内容没有复杂的业务逻辑，也不需要重用，只是一小部分 HTML 片段，这个时候可以使用 Angular 提供的一个特性，叫做投影。在 Angular 里面可以使用 ng-content 指令将父组件模板中的任意片段投影到它的子组件上。
       需要注意的是，自定义的组件的标签内部是不可以嵌套其他标签的，它不像一般的 HTML 标签可以嵌套，但可以使用投影实现嵌套。
1. 单个投影点：
app.compontent.html:

child.compontent.html:

效果：

加点样式：
.wrapper {  // 子组件
background: lightgreen
}  
.wrapper {  // 父组件
background: cyan
}
效果：

2. 多个<ng-content>投影点
app.compontent.html:

 child.compontent.html:

 效果：

       页头和页脚被投影到子组件中，同时title也被投影过去；父组件模板中投影内容中插值绑定只能绑定父组件中的属性，虽然内容会被投影到子组件。
       其中，使用 select 属性可以实现针对性的内容投影。但是，需要注意的是，select 属性对应的值所指定的标签节点必须是组件下的直接子节点。否则，select属性无效。 
       select属性支持标签名、属性、CSS类和: not伪类的任意组合。
原文链接：https://www.cnblogs.com/starof/p/8743223.html