Angular 组件生命周期：从开始到结束的旅程

Angular 组件生命周期概述

Angular 组件生命周期是一系列预定义的阶段，组件在其中执行特定的任务。这些阶段从组件的创建开始，一直持续到组件的销毁。了解组件生命周期对于构建健壮且可维护的 Angular 应用程序至关重要。

挂载阶段

挂载阶段是组件生命周期的第一个阶段，它发生在组件被创建时。在这个阶段，Angular 会执行以下步骤：

• 调用组件的构造函数。
• 调用 ngOnInit 生命周期钩子。
• 调用 ngDoCheck 生命周期钩子（仅在首次变更检测时）。
• 调用 ngOnChanges 生命周期钩子（仅在输入属性发生变化时）。

变更检测

变更检测是 Angular 组件生命周期中最重要的阶段之一。在这个阶段，Angular 会检查组件的状态是否发生变化，并相应地更新组件的视图。变更检测会根据以下触发条件执行：

• 组件的输入属性发生变化。
• 组件的方法被调用。
• 组件的计时器或事件处理器被触发。

销毁阶段

销毁阶段是组件生命周期的最后一个阶段，它发生在组件被销毁时。在这个阶段，Angular 会执行以下步骤：

• 调用 ngOnDestroy 生命周期钩子。
• 从 DOM 中移除组件的视图。
• 释放组件的所有资源。

组件生命周期函数详解

constructor

constructor 是组件生命周期中第一个执行的函数。它主要用于以下目的：

• 接收 Angular 注入的服务实例对象。
• 初始化组件的属性和状态。

ngOnInit

ngOnInit 是组件生命周期中第二个执行的函数。它主要用于以下目的：

• 初始化组件的视图。
• 加载组件所需的数据。
• 设置组件的事件监听器。

ngDoCheck

ngDoCheck 是组件生命周期中第三个执行的函数。它主要用于以下目的：

• 检测组件的状态是否发生变化。
• 如果组件的状态发生变化，则更新组件的视图。

ngOnChanges

ngOnChanges 是组件生命周期中第四个执行的函数。它主要用于以下目的：

• 检测组件的输入属性是否发生变化。
• 如果组件的输入属性发生变化，则更新组件的视图。

ngAfterViewInit

ngAfterViewInit 是组件生命周期中第五个执行的函数。它主要用于以下目的：

• 在组件的视图加载完成后执行。
• 初始化组件的子组件和视图子树。

ngAfterViewChecked

ngAfterViewChecked 是组件生命周期中第六个执行的函数。它主要用于以下目的：

• 在组件的视图加载完成后执行。
• 检查组件的子组件和视图子树是否发生变化。

ngOnDestroy

ngOnDestroy 是组件生命周期中最后一个执行的函数。它主要用于以下目的：

• 在组件被销毁时执行。
• 释放组件的所有资源。
• 从 DOM 中移除组件的视图。