生命周期函数

一、组件的生命周期函数

constructor：

最先执行，构建组建时执行。

此时，可以拿到内部定义的属性的值，不可以拿到父组件传过来的输入属性。

OnInit：

接受完父组件传递过来的值后执行。可以拿到父组件传过来的输入属性。

export class StreamComponent implements OnInit {
  ngOnInit() {
  }
    
  @Input()
  receiveGoods: Goods

  streamTxt: string = 'aaa';
}

OnChange ：

只在输入属性发生变化时执行（但是不能深度监听，只在输入属性的指针发生改变时触发）
内部属性变化时不会执行

export class StreamComponent implements OnChange  {
  ngOnChange() {
  }
}

DoCheck :

可以深度监听输入属性，并且在获取或者失去焦点时都会触发，特别敏感，所以内部代码尽量轻量和高效。
可以监听内部属性的变化

export class StreamComponent implements DoCheck  {
  ngDoCheck() {
  }
}

AfterViewInit：

视图初始化完毕之后，触发此函数

export class StreamComponent implements AfterViewInit  {
  ngAfterViewInit() {
  }
}

子组件的AfterViewInit先执行，父组件的AfterViewInit后执行。（因为只有子组件初始化完毕后，父组件才可能初始化完毕）

AfterViewChecked：

子组件视图改变（内部属性，输入属性等）触发
获取或失去焦点也会触发。

export class StreamComponent implements AfterViewChecked  {
  ngAfterViewChecked() {
  }
}

AfterContentInit:

这个生命周期函数与投影（内容插槽）相关。

投影（内容插槽）：组件中插入的标签会在组件对应的html代码的相应位置显示。

示例：

调用stream组件的地方：

<app-stream [receiveGoods]="goods">
    <h4>投影1</h4>
    <p>投影2</p>
</app-stream>

stream组件的html文件：

<div>
    <h3>父组件的商品：{{receiveGoods.name}}</h3>
    <p>父组件的价格：{{receiveGoods.price}}</p>
    自己的属性：<input type="text" [(ngModel)]="streamTxt">
    <p>streamTxt: {{streamTxt}}</p>

    <ng-content select="p"></ng-content>
    <ng-content select="h4"></ng-content>
</div>

select的值为选择器。可以是id选择器，类选择器，标签选择器等

AfterContentInit：

有投影时执行
既然是内容插槽，父组件将内容插进入后，子组件才能显示。所以父组件的AfterContentInit先执行，子组件的AfterContentInit后执行。

AfterContentChecked

也是很敏感。可能修改视图时触发。

OnDestroy：

组件销毁时执行。

一、组件的生命周期函数​

constructor：​

OnInit：​

OnChange ：​

DoCheck :​

AfterViewInit：​

AfterViewChecked：​

AfterContentInit:​

AfterContentChecked​

OnDestroy：​