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

投影

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

指令：ng-content

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

多个投影点标识:
匹配class名为blue的显示内容
匹配header标签的显示内容
匹配name属性值为red的显示内容

demo:

app.component.html

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

aftercontent.component.html

<p>
  aftercontent works!
  <ng-content>ng-content>
p>

运行图：

多个投影点demo:

app.component.html

<app-aftercontent>
    <div style="color:red;" class="red">我是要投影的内容1div>
    <p>我是要投影的内容2p>
    <div style="color:yellow;" name="yellow">我是要投影的内容3div>
app-aftercontent>

aftercontent.component.html

<p>
  aftercontent works!
  <ng-content select=".red"></ng-content>
  <ng-content select="p"></ng-content>
  <ng-content select="[name=yellow]"></ng-content>
</p>

运行图

AfterContentInit

定义：投影内容初始化，发生在doCheck之后，只调用一次

AfterContentCheck

定义：投影内容变更检测，发生在AfterContentInit之后，可重复调用

要点：父组件的投影钩子在子组件之前，父组件投影钩子初始化和检测完毕，才调用子组件投影钩子。可以理解为：因为是要把父组件的内容投影进子组件，所以父组件钩子先执行。

demo：

app.component.ts

export class AppComponent implements AfterContentInit,AfterContentChecked {
  ngAfterContentInit():void{
    console.log('父组件投影内容初始化完毕');
  }

  ngAfterContentChecked():void{
    console.log('父组件投影内容变更检测完毕');
  }


}

aftercontent.component.ts

export class AftercontentComponent implements OnInit,AfterContentInit,AfterContentChecked {

  constructor() { }

  ngOnInit() {
  }
  ngAfterContentInit():void{
    console.log('子组件投影内容初始化完毕');
  }

  ngAfterContentChecked():void{
    console.log('子组件投影内容变更检测完毕');
  }

}

Tips:
控制台在Angular项目running后会再次执行变更检测钩子，如ngDoCheck、ngAfterContentChecked、ngAfterViewChecked