Angular - 组件生命周期

Angular 组件在其生命周期中会经历一系列阶段/事件。在继续学习 Angular 的旅程之前，理解组件在其整个生命周期中如何与框架和 DOM 交互是非常必要的。

当 Angular 组件被构造时，它首先进入变更检测阶段，检查输入是否有变化并相应行事。然后，初始化阶段启动，继续进入其他阶段，最终在销毁阶段被销毁。

Angular 中的组件生命周期阶段

Angular 组件生命周期的不同阶段如下所示 −

• 创建： 这是第一个阶段，组件在此阶段被实例化。

• 变更检测： 然后，Angular 尝试检测应用视图和内容的变更。

• 渲染： 变更检测之后，新的模板会被更新。

• 销毁： 最后，组件被销毁。

Angular 中的组件生命周期钩子

Angular 组件的每个阶段都关联一个生命周期钩子接口，可以实现该接口在特定阶段执行任意操作。通常，生命周期钩子指的是生命周期钩子接口的方法。让我们来看看这些阶段、它们的顺序以及对应的钩子。

组件生命周期钩子的执行顺序

让我们通过钩子来查看任意组件/指令的生命周期序列。

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

示例

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

步骤 1： 使用以下命令通过 Angular CLI 创建一个新组件 −

ng generate component my-lifecycle-sample

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

ng generate component my-lifecycle-sample
CREATE src/app/my-lifecycle-sample/my-lifecycle-sample.spec.ts (633 bytes)
CREATE src/app/my-lifecycle-sample/my-lifecycle-sample.ts (247 bytes)
CREATE src/app/my-lifecycle-sample/my-lifecycle-sample.css (0 bytes)
CREATE src/app/my-lifecycle-sample/my-lifecycle-sample.html (35 bytes)

步骤 2： 在组件中添加所有生命周期钩子并记录日志消息：

MyLifecycleSample.ts

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

@Component({
  selector: 'app-my-lifecycle-sample',
  imports: [],
  templateUrl: './my-lifecycle-sample.html',
  styleUrl: './my-lifecycle-sample.css',
})
export class MyLifecycleSample {
   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
   }
}

步骤 3： 将组件添加到 app 组件模板 app.component.html 中。

<h1>Expense Management Application</h1>
<app-expense-entry></app-expense-entry>
<app-my-lifecycle-sample></app-my-lifecycle-sample>
<router-outlet />

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

Angular 组件生命周期多选题

在本节中，通过回答以下问题来测试您对 Angular 组件生命周期的理解 −