Angular 是一个流行的前端框架，它提供了一整套的生命周期钩子函数，用于管理组件的各种状态和行为。钩子函数可以在特定的时机触发，在这些时机可以执行特定的操作，以满足我们的需求。
本篇文章将深入介绍 Angular 组件的生命周期，并详细解释每个钩子函数对应的时机和作用。
Angular 组件生命周期
Angular 组件的生命周期从创建到销毁，分为多个阶段，它们如下：
- ngOnChanges：组件的输入属性发生变化时触发。
- ngOnInit：组件被创建完毕后触发，用于初始化组件数据。
- ngDoCheck：组件变化检测阶段触发，用于自定义变化检测逻辑。
- ngAfterContentInit：组件的子组件被初始化完毕后触发。
- ngAfterContentChecked：组件的子组件变化检测完毕后触发。
- ngAfterViewInit：组件的视图初始化完毕后触发。
- ngAfterViewChecked：组件的视图变化检测完毕后触发。
- ngOnDestroy：组件被销毁前触发，用于清理组件资源。
生命周期钩子函数详解
ngOnChanges
ngOnChanges 钩子函数会在组件的输入属性发生变化时触发。这个钩子函数接收一个 SimpleChanges 对象作为参数，该对象包含了每个发生变化的输入属性的变化前和变化后的值。
例如，我们有一个组件类，并为其声明一个输入属性：
-- -------------------- ---- -------
------------
--------- -----------
--------- -
------------------
-
--
------ ----- ------------- ---------- --------- -
-------- -------- -------
-------------------- -------------- -
--- ---- -------- -- -------- -
--- ------ - ------------------
--- ------ - ------------------------------------
--- ------- - -------------------------------------
--------------- ----------- --- ---------- --- ------------
-
-
-当我们在使用这个组件时，给 message 属性传入不同的值，ngOnChanges 钩子函数就会被触发：
<app-test [message]="'Hello'"></app-test> <app-test [message]="'World'"></app-test>
结果会在控制台中输出：
属性 message 的值从 undefined 更改为 "Hello" 属性 message 的值从 "Hello" 更改为 "World"
ngOnInit
ngOnInit 钩子函数会在组件被创建完毕后触发，用于初始化组件的数据。这个钩子函数只会在组件初始化时调用一次。
例如，我们有一个组件类，并在其中定义了一个数字变量：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
----------------
-
--
------ ----- ---------------- ---------- ------ -
------ ------ - --
---------- -
-------------- -- -
-------------
-- ------
-
-当我们使用这个组件时，ngOnInit 钩子函数就会被触发，并启动一个计时器，每秒增加一次 count 变量的值：
<app-counter></app-counter>
ngDoCheck
ngDoCheck 钩子函数会在组件发生变化检测时触发，用于自定义变化检测逻辑。Angular 默认会对组件和指令执行变化检测，以决定是否需要重新渲染视图。
例如，我们有一个组件类，并在其中定义了一个字符串变量：
-- -------------------- ---- -------
------------
--------- ------------
--------- -
---------------
-
--
------ ----- -------------- ---------- ------- -
----- ------ - --- ----------------------------
----------- -
-- ---- ------------------- -- -- -
--------- - --- ----------------------------
-
-
-当我们使用这个组件时，ngDoCheck 钩子函数就会被触发，并检测当前秒数是否为 0，如果是，则更新 time 变量的值：
<app-clock></app-clock>
ngAfterContentInit
ngAfterContentInit 钩子函数会在组件的子组件被初始化完毕后触发，用于处理子组件的初始化逻辑。
例如，我们有一个组件类，并为其声明一个子组件：
-- -------------------- ---- -------
------------
--------- ----------
--------- -
----
--- ----------- --- -- ------------------
-----
-------------------------
-
--
------ ----- ------------ ---------- ---------------- -
---------------------------------- --------- ----------------------------
----- -------- - ---
-------------------- -
--------- - --------------------- -- -----------
-
-
------------
--------- ---------------
--------- -
-----
------------------
-------------------------
------
-
--
------ ----- ---------------- -
-------- ------ -------
-当我们使用这个组件时，ngAfterContentInit 钩子函数就会被触发，并从子组件中获取每个 TabItemComponent 的 title 属性：
<app-tab> <app-tab-item title="Tab 1">Content 1</app-tab-item> <app-tab-item title="Tab 2">Content 2</app-tab-item> <app-tab-item title="Tab 3">Content 3</app-tab-item> </app-tab>
ngAfterContentChecked
ngAfterContentChecked 钩子函数会在组件的子组件变化检测完毕后触发，用于处理子组件的变化检测逻辑。
例如，我们有一个组件类，并为其声明一个子组件：
-- -------------------- ---- -------
------------
--------- ------------
--------- -
--------- -------------
-
--
------ ----- -------------- -
-------- ----- ------ - --------
-
------------
--------- -------------
--------- -
---------- --------------------------
------- ------------------------------- -----------
-
--
------ ----- --------------- ---------- ------------------- -
----- ------ - ----------
--------------------- ------ - --
----------------------- -
----------------------------
--------------------- - ---------------------------
-
--------------- -
--------- - --------
-
-当我们使用这个组件时，ngAfterContentChecked 钩子函数就会被触发，并记录变化检测的次数：
<app-parent></app-parent>
ngAfterViewInit
ngAfterViewInit 钩子函数会在组件的视图初始化完毕后触发，用于处理组件视图的初始化逻辑。
例如，我们有一个组件类，并在其中初始化了一个地图插件：
-- -------------------- ---- -------
------------
--------- ----------
--------- -
---- ------------- -------------- --------------
-
--
------ ----- ------------ ---------- ------------- -
-------------------------- ------------- -----------
----------------- -
--- --- - --- ------------------------------------------
--- ----- - --- ------------------- --------
------------------------ ----
--------------------------------
-
-当我们使用这个组件时，ngAfterViewInit 钩子函数就会被触发，并创建地图实例：
<app-map></app-map>
ngAfterViewChecked
ngAfterViewChecked 钩子函数会在组件的视图变化检测完毕后触发，用于处理组件视图的变化检测逻辑。
例如，我们有一个组件类，并在其中定义了一个计数器变量：
-- -------------------- ---- -------
------------
--------- --------------
--------- -
------- ------------------------- -- --------- --------------
-
--
------ ----- ---------------- ---------- ---------------- -
------ ------ - --
-------------------- -
----------------------
-
--------- -
-------------
-
-当我们点击按钮时，ngAfterViewChecked 钩子函数就会被触发，并输出变化检测完成的信息：
<app-clicker></app-clicker>
ngOnDestroy
ngOnDestroy 钩子函数会在组件被销毁前触发，用于清理组件的资源。
例如，我们有一个组件类，并在其中声明了一个计时器：
-- -------------------- ---- -------
------------
--------- ------------
--------- -
---------------
-
--
------ ----- -------------- ---------- ------- --------- -
----- ------ - --
----------- ----
---------- -
--------------- - -------------- -- -
------------
-- ------
-
------------- -
-------------------------------
-
-当我们使用这个组件时，ngOnDestroy 钩子函数就会在组件销毁前被触发，并清理计时器的资源：
<app-timer></app-timer>
总结
Angular 的生命周期和钩子函数是非常重要的概念，能够帮助我们理解组件的创建、销毁和变化检测过程。通过本篇文章的介绍，我们可以更加深入地了解每个钩子函数的使用场景和作用，同时可以根据实际需求对其进行灵活的调用。
示例代码：https://stackblitz.com/edit/angular-lifecycle钩子函数详解
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64571e5c968c7c53b09f3892