Angular生命周期（深度探究）

一、全部生命周期及触发时机。

页面结构：
父：app.component.html
子：app-child.conponent.html
以下生命周期打印输出均为子组件。
子代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-app-child',
  templateUrl: './app-child.component.html',
  styleUrls: ['./app-child.component.less']
})
export class AppChildComponent implements OnInit {

  constructor() { }

  ngOnChanges() {
    console.log('ngOnChanges-当 Angular 设置或重新设置数据绑定的输入属性时响应。');//当 Angular 设置或重新设置数据绑定的输入属性时响应。
  }
  ngOnInit() {
    console.log('ngOnInit-在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。');// 	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
  }
  ngDoCheck() {
    console.log('ngDoCheck-检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。'); //检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。
  }
  ngAfterContentInit() {
    console.log('ngAfterContentInit-当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。');//当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。
  }
  ngAfterContentChecked() {
    console.log('ngAfterContentChecked-每当 Angular 检查完被投影到组件或指令中的内容之后调用。');//每当 Angular 检查完被投影到组件或指令中的内容之后调用。
  }
  ngAfterViewInit() {
    console.log('ngAfterViewInit-当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。');//当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。
  }
  ngAfterViewChecked() {
    console.log('ngAfterViewChecked-每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。');//每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。
  }
  ngOnDestroy() {
    console.log('ngOnDestroy-每当 Angular 每次销毁指令/组件之前调用并清扫。');//每当 Angular 每次销毁指令/组件之前调用并清扫。
  }

}

运行结果：

可以看到，ngDoCheck方法执行了两次，这里是因为angular默认变化检测策略为脏检查，只要发生变化，就全部从父组件到子组件进行一次检查。
详细参考：https://blog.csdn.net/xwnxwn/article/details/82725408

二、ngOnChanges()

官方释义：
ngOnChanges() 方法获取了一个对象，它把每个发生变化的属性名都映射到了一个SimpleChange对象，该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代，并记录它们。
触发时机：当 Angular 设置或重新设置数据绑定的输入属性时响应。
通俗的讲，当传入的值初始化或发生变化时就会触发。
初始化触发：
父：app.component.html

<p>生命周期</p>
<app-child [titleName]="title"></app-child>

子：child.component.html

<p>{{titleName}}</p>

子：child.component.ts

 @Input()
  titleName!: string;

运行结果：
初始化触发ngOnChanges。
变更触发：
父：app.component.html

<button (click)="setTitle()">改变title</button>

父：app.component.ts

setTitle() {
    this.title = 'new life cycle';
  }

点击按钮后运行结果：

变更后触发ngOnChanges，触发变更检测DoCheck，ngAfterContentChecked，ngAfterViewChecked。

三、ngOnInit()

官方释义：在构造函数外部执行复杂的初始化，在 Angular 设置好输入属性之后设置组件。
触发时机：在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
通俗的讲：ngOnInit只有首次初始化页面时触发，并且在该组件的整个生命周期中只触发一次。即使没有触发ngOnChanges也会触发ngOnInit。

四、ngDoCheck()

官方释义：检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。
触发时机：紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。
通俗的讲：ngDoCheck()会在ngOnInit()和ngOnChanges() 后运行，若ngOnInit()和ngOnChanges() 都触发，ngDoCheck()会在ngOnInit()后触发，至于首次加载页面ngDoCheck()会触发两次，上文第一章末已提及，这里不做赘述。
详细参考：https://blog.csdn.net/weixin_43964866/article/details/109037532

五、ngAfterContentInit()

官方释义：当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。
调用时机：第一次 ngDoCheck() 之后调用，只调用一次。
通俗的讲：ngAfterContentInit会在页面初次加载，首次触发ngDoCheck后调用，用来在初始化视图后进行一些操作。

六、ngAfterContentChecked()

官方释义：每当 Angular 检查完被投影到组件或指令中的内容之后调用。
调用时机：ngAfterContentInit() 和每次 ngDoCheck() 之后调用。
通俗的讲：每次变更检测后都会触发该回调。

七、ngAfterViewInit()

官方释义： 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。
调用时机：第一次 ngAfterContentChecked() 之后调用，只调用一次。

八、ngAfterViewChecked()

官方释义：每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。
调用时机：ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。

九、ngOnDestroy()

官方释义：每当 Angular 每次销毁指令/组件之前调用并清扫。
调用时机：在 Angular 销毁指令或组件之前立即调用。
销毁时调用，在组件生命周期中只调用一次，且调用后组件销毁。
参考：https://angular.cn/guide/lifecycle-hooks