Angular 中的组件生命周期

本文将为大家介绍 Angular 中的组件生命周期，包括组件创建、初始化、更新和销毁等各个阶段，旨在帮助您深入了解 Angular 组件以及如何处理其生命周期。

Angular 组件的生命周期概述

在 Angular 中，组件的生命周期可以分为以下几个阶段：

• 创建阶段：组件实例化后，Angular 会调用一些方法以初始化组件，并为其执行必要的设置。
• 更新阶段：当组件的输入属性发生变化或子组件需要更新时，Angular 会重新调用一些方法，用以更新组件视图。
• 销毁阶段：当组件实例不再需要时，Angular 会为其执行一些必要的清理工作。

以下是具体的组件生命周期函数及其调用顺序：

1. constructor()：组件的构造函数，用于创建组件实例。
2. ngOnChanges()：当组件的输入属性(@Input)发生变化时，会调用此方法。
3. ngOnInit()：在组件的 ngOnChanges() 方法执行后，会在组件初始化时执行此方法。
4. ngDoCheck()：Angular 会在每个变更检测周期中调用此方法，用于检查组件是否需要更新。
5. ngAfterContentInit()：在组件的子组件初始化之后，会调用此方法。
6. ngAfterContentChecked()：在每个变更检测周期中，内容投影（Content Projection）会调用此方法。
7. ngAfterViewInit()：在组件及其子组件的视图初始化后调用此方法。
8. ngAfterViewChecked()：在每个变更检测周期中，组件及其子组件的视图会调用此方法。
9. ngOnDestroy()：在组件被销毁之前执行此方法。

Angular 组件的生命周期详解

1. constructor()

每个组件都包含一个构造函数，用于创建组件实例。在构造函数中可以注入服务（Dependency Injection），也可以该初始化组件的变量和属性。然而，除非您知道自己在做什么，否则不建议在构造函数中处理昂贵的逻辑。同时，在组件的构造函数中不应该执行与视图相关的逻辑，因为此时视图还未初始化。

2. ngOnChanges()

当组件的输入属性变化时，Angular 会调用 ngOnChanges() 方法。在方法中可以获取到变化前后的属性值，通过 SimpleChanges 对象的 previousValue 和 currentValue 属性获取。

ngOnChanges(changes: SimpleChanges) {
  for (let propName in changes) {
    let change = changes[propName];
    let prevValue = change.previousValue;
    let currValue = change.currentValue;
  }
}

如果需要做更复杂的变化检测，你可以使用 KeyValueDiffers 和 IterableDiffers 服务。

3. ngOnInit()

在 ngOnChanges() 方法执行之后，ngOnInit() 方法会在组件初始化时执行，它会在以下两种情况下调用：

• 组件在 ngOnChanges() 方法之后被创建。
• 组件在 ngOnChanges() 方法之后被更新。

ngOnInit() 方法用于在组件初始化后执行一些必要的操作，比如初始化其他组件或服务、获取组件初始化数据等。需要注意的是，在 ngOnInit() 方法中，视图仍未初始化完成。

4. ngDoCheck()

ngDoCheck() 方法会在组件及其子组件发生变化时被调用，并且它会在每个变更检测周期中执行。这个方法可以用来做自定义的变化检测，但是需要注意的是，不要在此方法中修改组件的属性和变量。

ngDoCheck() {
  // 自定义变化检测逻辑
  if (this.inputData !== this._prevInputData) {
    this.inputData = this._prevInputData;
  }
}

5. ngAfterContentInit()

在组件的视图内容投影（Content Projection）被初始化之后，ngAfterContentInit() 方法会被调用。在该方法中，你可以访问组件的 Projection（子组件）、 Content Children 或 Content Queries。

-- -------------------- ---- -------
-------------------- -
  -- ----------
  ---------------- - ----------------------------------

  -- ------ ------- --------
  -------------------- - -------------------------------

  -- ------ ------- -------
  ----------------------------------- -- -
    --------------------------------------------------------------
  ---
-

6. ngAfterContentChecked()

在 ngAfterContentInit() 方法执行之后，ngAfterContentChecked() 方法会在每个变更检测周期中执行。它用于检测投影内容是否发生变化，如果有变化，则执行相应的操作，比如更新组件的状态。

ngAfterContentChecked() {
  if (this.bodyContent !== this._prevBodyContent) {
    this.bodyContent = this._prevBodyContent;
  }
}

7. ngAfterViewInit()

在组件的视图及其子组件的视图初始化之后，ngAfterViewInit() 方法会被调用。在该方法中，你可以访问组件的视图及其子视图，也可以调用 ViewChild 或 ViewChildren 引用的元素。

ngAfterViewInit() {
  // 获取子组件的 ViewChild
  this.childView = this.childComponent.childView;

  // 获取元素的 ViewChild
  this.buttonElement = this.button.nativeElement;
}

8. ngAfterViewChecked()

在 ngAfterViewInit() 方法执行之后，ngAfterViewChecked() 方法会在每个变更检测周期中执行。它用于检测视图是否发生变化，如果有变化，则执行相应的操作，比如更新组件的状态。

ngAfterViewChecked() {
  if (this.buttonContent !== this._prevButtonContent) {
    this.buttonContent = this._prevButtonContent;
  }
}

9. ngOnDestroy()

当组件不再需要时，Angular 会为其执行一些必要的清理工作，包括取消订阅、释放定时器、销毁服务等。此时，ngOnDestroy() 方法会被调用。

ngOnDestroy() {
  // 取消订阅
  this.subscription.unsubscribe();
}

需要注意的是，在调用此方法之后，组件及其视图将被销毁，因此，你应该确保该方法没有执行不必要的操作，比如释放已被销毁的资源。

总结

本文重点介绍了 Angular 组件的生命周期，涵盖组件的初始化、更新、销毁等各个阶段。我们深入了解了每个生命周期函数的调用顺序以及其用途，希望读者在实际开发中可以根据自己的需求，灵活运用这些函数。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4aae0b5eee0b525c6e320