Angular的组件投影

自己创建的组件，在页面引用的时候组件标签里面填写的内容是不生效的，因为组件不具备投影功能，但是我们可以在组件里面添加ng-content标签，ng-content 相当于一个插槽，我们在组件标签里面设置的数据会显示在ng-content里面，也可以设置多个ng-content，然后设置select属性选择对应的内容。

组件 html代码

<h3>组件投影</h3>
<div>
  <p>showDown</p>
  <div class="bg-primary">
  	//选择class为head的内容
    <ng-content select=".head"></ng-content>
  </div>
  <div class="bg-warning">
    //选择class为content的内容
    <ng-content select=".content"></ng-content>
  </div>
  <div class="bg-success">
    //选择class为foot的内容
    <ng-content select=".foot"></ng-content>
  </div>
</div>

引用组件

<app-show-down>
  <div class="head">这是头部</div>
  <div class="content">这是默认内容</div>
  <div class="foot bg-success">这是尾部</div>
</app-show-down>