tags: Angular Lifecycle Hooks

[學習筆記] 淺談 Angular 元件生命週期

Angular 的生命週期

官方文件：生命週期鉤子 Lifecycle Hooks

在 Angular 的每個元件都存在著生命週期（Lifecycle），從建立元件，檢測綁定屬性是否更新，到元件從 DOM 中銷毀，就構成一個元件的生命週期。

而 Angular 提供了八個 Lifecycle Hooks（生命週期鉤子），讓使用者能夠在各個階段對元件進行操作。

舉例來說，當我們建立一個叫做 test 的 Component，就會去呼叫 constructor 和 ngOnInit 來初始化元件：

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

生命週期鉤子的順序

範例程式碼：Stackblitz

關於 Angular 生命週期鉤子的執行順序，大致排列如下：

Constructor 建構式

• constructor() 會在 class（類別）建立時最先被執行
• 是類別的屬性， Angular 並不能控制 constructor
• 當 constructor 執行時，元件尚未被初始化，因此幾乎不會在這個階段寫程式碼
• 主要用於相依注入（dependency injection），例如服務、函式或值

constructor(private service: HeroService) { }

ngOnChanges

• 當元件 @Input/@Output 綁定的值發生變化時觸發
• 在 ngOnInit 之前執行

ngOnInit

• 用來初始化頁面內容，顯示數據綁定、設置 directive 和輸入屬性
• 在第一次 ngOnChanges 完成後呼叫，只執行一次

ngDoCheck

• 當狀態發生變化，而 Angular 本身無法檢測該變化時觸發
• 在 ngOnChanges 和 ngOnInit 之後，於每次檢測變化時執行
• 使用時需注意：ngOnChanges 被觸發的頻率非常高，程式碼應盡量精簡，避免導致頁面性能問題

ngAfterContentInit

• 頁面有使用 ng-content 進行元件內容投射
• 在初始化之後會執行一次

ngAftertContentChecked

• 在每次檢查投射內容時執行
• 在每次呼叫 ngDoCheck 之後觸發

ngAfterViewInit

• 在元件或其子元件檢視初始化之後，會執行一次

ngAfterViewChecked

• 在每次檢視元件或其子元件之後觸發

ngOnDestory

• 在元件被摧毀之前執行

參考資料：

• Angular 完整元件生命週期介紹
• Angular：生命週期和鉤子函數