Angular10--使用ng-content进行组件内映射

父组件app-ngcontent中使用子组件app-child，希望能插入一些内容到子组件中。在子组件的ng-content中select属性可以通过标签、class、id等选择器的方法决定父组件要插入的内容在哪展示。

要插入的内容都是在app-child下的子节点，如果不是子节点(如header)，就要在直接的子节点标签加上ngProjectAs

//父组件--ngconetnt.component.html
<div>
  <h1>ng-content--可嵌入外部内容的组件</h1>
  <app-child>
    我是外部嵌入的内容
    <div ngProjectAs="header"> 
      <header>
        我是外部嵌入的内容， 标签header
      </header>
    </div>
    <div class="demo2">
      我是外部嵌入的内容， 选择器 demo2
    </div>
    <div class="demo3">
      我是外部嵌入的内容， 选择器 demo3
    </div>
    --底部内容
  </app-child>
</div>

//子组件--child.component.html
<ng-container>
  <div class="content">
    <ng-content></ng-content>
  </div>
  <div class="content blue">
    <ng-content select="header"></ng-content>
  </div>
  <div class="content red">
    <ng-content select=".demo2"></ng-content>
  </div>
  <div class="content green">
    <ng-content select=".demo3"></ng-content>
  </div>
</ng-container>

//child.component.scss
.content {
    padding: 10px;
    margin-top: 10px;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #de7d28;

    &.blue {
        background-color: blue;
    }

    &.red {
        background-color: red;
    }

    &.green {
        background-color: green;
    }
}