angular 投影 ng-content 将父组件模版上的任意片段投影到子组件上

运行时动态改变组件模版的内容，ngContent指令将父组件模版上的任意片段投影到子组件上。

一、一个投影点

父组件 app.component.ts

<div class="wrapper">
  <h2>我是父组件</h2>
  <!--app-stock-item 是子组件-->
  <app-stock-item></app-stock-item>
</div>

子组件 stock-item.component.html

<div class="wrapper">
  <h2>我是子组件</h2>
  <!--父组件的内容从这里传进来-->
  <ng-content></ng-content> 
</div>

显示效果

二、多个投影点

投影父组件的某一部分到子组件

父组件 app.component.html

<div class="wrapper">
  <h2>我是父组件</h2>
  <app-stock-item>
    <div class="name">我是父组件的name元素 {{name}}</div>
    <div class="age">我是父组件的age {{age}}</div>
  </app-stock-item>
</div>

.name { color: green; }
.age { color: red; }

子组件：stock-item.component.html

<div class="content">
  <h2>我是子组件</h2>
  <!--select-->
  <ng-content select=".name"></ng-content> 
  <h4>我是子组件中的分隔线，测试多个投影实现效果</h4>
  <ng-content select=".age"></ng-content>   
</div>