Angular - 组件生命周期

Angular 组件在其生命周期中会经历一系列阶段/事件。当一个 Angular 组件被构造时，它首先会经历变更检测阶段，在此阶段它会检查输入是否有任何变化，然后相应地采取行动。然后，初始化阶段开始并继续进入其他阶段，最后在销毁阶段被销毁。

生命周期钩子接口

Angular 组件的每个阶段都有一个生命周期钩子接口，可用于在该特定阶段执行任意操作。让我们看看这些阶段、它们的顺序以及相应的钩子接口。

变更检测：变更检测是第一个阶段，在此阶段，Angular 组件将检查输入是否有变化并相应地采取行动。它有一个对应于生命周期钩子的 `ngOnChanges`。

ngOnChanges() {
   console.log("Change detection")
}

初始化：接下来是初始化阶段，在此阶段，Angular 组件/指令将根据输入执行必要的初始化过程并设置组件属性。它可以用于从远程服务器获取数据、基于输入的复杂功能等。此阶段仅在 Angular 组件/指令首次设置时发生。初始化阶段的生命周期钩子是 `ngOnInit`。

ngOnInit() {
   console.log("Initialization of component / directive")
}

检查变更检测：接下来是检查阶段，在此阶段，Angular 组件/指令尝试检测组件中的更改并相应地采取行动。它可以用于检测可能无法直接完成的复杂/高级更改。检查阶段的生命周期钩子是 `ngDoCheck`。

ngDoCheck() {
   console.log("Custom change detection")
}

内容初始化：接下来是内容初始化阶段，在此阶段，Angular 设置组件/指令的外部内容。它可以用于检查内容并执行与内容相关的某些初始化工作。此阶段仅在 Angular 组件/指令首次设置时发生。内容初始化阶段的生命周期钩子是 `ngAfterContentInit`。

ngAfterContentInit() {
   console.log("Content initialization")
}

检查内容更改：接下来是内容检查阶段，在此阶段，Angular 尝试检测组件/指令的外部内容中的更改。它可以用于查找外部内容中的更改并启动变更检测阶段。内容检查阶段的生命周期钩子是 `ngAfterContentChecked`。

ngAfterContentChecked() {
   console.log("Checking changes in content")
}

视图初始化：接下来是视图初始化阶段，在此阶段，Angular 设置组件/指令的各种子视图。它可以用于检查子视图并执行与其相关的某些初始化工作。此阶段仅在 Angular 组件/指令首次设置时发生。视图初始化阶段的生命周期钩子是 `ngAfterViewInit`。

ngAfterViewInit() {
   console.log("View initialization")
}

检查视图更改：下一个阶段是视图检查阶段，在此阶段，Angular 尝试检测组件/指令视图中的更改。它可以用于查找视图中的更改并启动变更检测阶段。视图检查阶段的生命周期钩子是 `ngAfterViewChecked`。

ngAfterViewChecked() {
   console.log("Checking changes in views")
}

销毁：最后一个阶段是销毁阶段，在此阶段，Angular 将销毁组件/指令。它可以用于取消订阅 Observable、取消注册回调和设置计时器。销毁阶段的生命周期钩子是 `ngOnDestroy`。

ngOnDestroy() {
   console.log("Destruction of component / directive")
}

生命周期钩子的顺序

让我们看看任意组件/指令及其钩子的生命周期顺序。

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnChanges
ngDoCheck
ngAfterContentChecked
ngAfterViewChecked
重复步骤 8 - 11 直到销毁
ngOnDestroy

让我们创建一个新的组件，Mylife-cycleComponent，连接所有钩子并使用控制台输出检查生命周期的顺序。

使用 Angular CLI 创建一个新组件，如下所示。

ng generate component my-life-cycle-sample

这将创建一个新的组件及其相关的模板和样式，如下所示。

$ ng generate component my-life-cycle-sample
CREATE src/app/my-life-cycle-sample/my-life-cycle-sample.component.css (0 bytes)
CREATE src/app/my-life-cycle-sample/my-life-cycle-sample.component.html (34 bytes)
CREATE src/app/my-life-cycle-sample/my-life-cycle-sample.component.spec.ts (638 bytes)
CREATE src/app/my-life-cycle-sample/my-life-cycle-sample.component.ts (252 bytes)
UPDATE src/app/app.module.ts (925 bytes)

将所有生命周期钩子添加到组件中并记录消息。

import { Component, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core';

@Component({
   selector: 'app-my-life-cycle-sample',
   templateUrl: './my-life-cycle-sample.component.html',
   styleUrls: ['./my-life-cycle-sample.component.css']
})
export class Mylife-cycleSampleComponent implements OnChanges, OnInit {

   ngOnChanges() {
      console.log("Change detection")
   }

   ngOnInit() {
      console.log("Initialization of component / directive")
   }
   
   ngDoCheck() {
      console.log("Custom change detection")
   }
   
   ngAfterContentInit() {
      console.log("Content initialization")
   }
   
   ngAfterContentChecked() {
      console.log("Checking changes in content")
   }
   
   ngAfterViewInit() {
      console.log("View initialization")
   }
   
   ngAfterViewChecked() {
      console.log("Checking changes in views")
   }
   
   ngOnDestroy() {
      console.log("Destruction of component / directive")
   }
}

将组件添加到 app 组件的模板 app.component.html 中。

<app-my-life-cycle-sample>
</app-my-life-cycle-sample>
<router-outlet></router-outlet>

使用 `ng serve` 运行应用程序，并在浏览器中通过开发者工具测试控制台。它将显示所有生命周期事件按上述顺序执行。

打印页面