投影相关笔记

投影 动态改变组件模板的内容
ng-content标记投影点 使用此指令可以将父组件上任意片段投影到子组件上
在这个插值表达式中只能使用父组件的属性，不能使用子组件的属性
使用ng-content可以定义多个html的投影点 ，而innerHTML只能插一段

1.在子组件child.component.html内写入

<div class="wrapper">
  <h4>我是子组件</h4>
  <!--ng-content可以写多个投射点，select对应前面的样式--> 
  <ng-content select=".header"></ng-content>
  <div>这个div定义在子组件中<div>
  <ng-content select=".footer"></ng-content>
</div>

2.在app.component.html内写入

<div class="wrapper">
  <h4>我是父组件</h4>
  <div>这个div定义在父组件中</div>
  <!--这里面调子组件，把要写的内容写在子组件的标签之间-->
  <app-child>
    <!--这两个样式是不用实现的，是用在投影点上指定位置使用的,在父组件这个模板中编写的投影内容，使用的插值表达式只能绑定父组件中的属性-->
    <div class="header">这是页头，这个div是父组件投影到子组件的，{{massage}}</div>
    <div class="footer">这是页脚，这个div是父组件投影到子组件的</div>
  </app-child>
</div>
<!--innerHTML只能绑定当前组件内容，innerHTML是浏览器特定的API,这种方式只能在浏览器用-->
<div [innerHTML]="divContent"></div>

3.在app.component.ts内写入

export class AppComponent implements {
  // 这个字符串就是一段HTML通过属性绑定帮到div上
  divContent="<div>使用innerHTML属性绑定的</div>";
}