Angular学习笔记（十六）组件周期钩子之投影和AfterContentInit

投影

定义：在运行时动态改变模版内容，父组件主动控制子组件的显示内容。

指令：ng-content

方法：在html中，父组件中引用子组件标签的写入要显示的内容，子组件使用<ng-content></ng-content>确定投影点。

多个投影点标识:
<ng-content select=".blue"></ng-content>匹配class名为blue的显示内容
<ng-content select="header"></ng-content>匹配header标签的显示内容
<ng-content select="[name]=red"></ng-content>匹配name属性值为red的显示内容

demo:

app.component.html

<app-aftercontent>
    <span style="color:red;">我是要投影的内容</span>
</app-aftercontent>

aftercontent.component.html

<p>
  aftercontent works!
  <