Angular - 元件生命週期

Angular 元件在其生命週期中會經歷一系列階段/事件。當一個 Angular 元件被構造時，它首先會經歷變更檢測階段，在此階段它會檢查輸入是否有任何變化，然後相應地採取行動。然後，初始化階段開始並繼續進入其他階段，最後在銷燬階段被銷燬。

生命週期鉤子介面

Angular 元件的每個階段都有一個生命週期鉤子介面，可用於在該特定階段執行任意操作。讓我們看看這些階段、它們的順序以及相應的鉤子介面。

變更檢測：變更檢測是第一個階段，在此階段，Angular 元件將檢查輸入是否有變化並相應地採取行動。它有一個對應於生命週期鉤子的 `ngOnChanges`。

ngOnChanges() {
   console.log("Change detection")
}

初始化：接下來是初始化階段，在此階段，Angular 元件/指令將根據輸入執行必要的初始化過程並設定元件屬性。它可以用於從遠端伺服器獲取資料、基於輸入的複雜功能等。此階段僅在 Angular 元件/指令首次設定時發生。初始化階段的生命週期鉤子是 `ngOnInit`。

ngOnInit() {
   console.log("Initialization of component / directive")
}

檢查變更檢測：接下來是檢查階段，在此階段，Angular 元件/指令嘗試檢測元件中的更改並相應地採取行動。它可以用於檢測可能無法直接完成的複雜/高階更改。檢查階段的生命週期鉤子是 `ngDoCheck`。

ngDoCheck() {
   console.log("Custom change detection")
}

內容初始化：接下來是內容初始化階段，在此階段，Angular 設定元件/指令的外部內容。它可以用於檢查內容並執行與內容相關的某些初始化工作。此階段僅在 Angular 元件/指令首次設定時發生。內容初始化階段的生命週期鉤子是 `ngAfterContentInit`。

ngAfterContentInit() {
   console.log("Content initialization")
}

檢查內容更改：接下來是內容檢查階段，在此階段，Angular 嘗試檢測元件/指令的外部內容中的更改。它可以用於查詢外部內容中的更改並啟動變更檢測階段。內容檢查階段的生命週期鉤子是 `ngAfterContentChecked`。

ngAfterContentChecked() {
   console.log("Checking changes in content")
}

檢視初始化：接下來是檢視初始化階段，在此階段，Angular 設定元件/指令的各種子檢視。它可以用於檢查子檢視並執行與其相關的某些初始化工作。此階段僅在 Angular 元件/指令首次設定時發生。檢視初始化階段的生命週期鉤子是 `ngAfterViewInit`。

ngAfterViewInit() {
   console.log("View initialization")
}

檢查檢視更改：下一個階段是檢視檢查階段，在此階段，Angular 嘗試檢測元件/指令檢視中的更改。它可以用於查詢檢視中的更改並啟動變更檢測階段。檢視檢查階段的生命週期鉤子是 `ngAfterViewChecked`。

ngAfterViewChecked() {
   console.log("Checking changes in views")
}

銷燬：最後一個階段是銷燬階段，在此階段，Angular 將銷燬元件/指令。它可以用於取消訂閱 Observable、取消註冊回撥和設定計時器。銷燬階段的生命週期鉤子是 `ngOnDestroy`。

ngOnDestroy() {
   console.log("Destruction of component / directive")
}

生命週期鉤子的順序

讓我們看看任意元件/指令及其鉤子的生命週期順序。

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnChanges
ngDoCheck
ngAfterContentChecked
ngAfterViewChecked
重複步驟 8 - 11 直到銷燬
ngOnDestroy

讓我們建立一個新的元件，Mylife-cycleComponent，連線所有鉤子並使用控制檯輸出檢查生命週期的順序。

使用 Angular CLI 建立一個新元件，如下所示。

ng generate component my-life-cycle-sample

這將建立一個新的元件及其相關的模板和樣式，如下所示。

$ ng generate component my-life-cycle-sample
CREATE src/app/my-life-cycle-sample/my-life-cycle-sample.component.css (0 bytes)
CREATE src/app/my-life-cycle-sample/my-life-cycle-sample.component.html (34 bytes)
CREATE src/app/my-life-cycle-sample/my-life-cycle-sample.component.spec.ts (638 bytes)
CREATE src/app/my-life-cycle-sample/my-life-cycle-sample.component.ts (252 bytes)
UPDATE src/app/app.module.ts (925 bytes)

將所有生命週期鉤子新增到元件中並記錄訊息。

import { Component, OnChanges, OnInit, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy } from '@angular/core';

@Component({
   selector: 'app-my-life-cycle-sample',
   templateUrl: './my-life-cycle-sample.component.html',
   styleUrls: ['./my-life-cycle-sample.component.css']
})
export class Mylife-cycleSampleComponent implements OnChanges, OnInit {

   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")
   }
}

將元件新增到 app 元件的模板 app.component.html 中。

<app-my-life-cycle-sample>
</app-my-life-cycle-sample>
<router-outlet></router-outlet>

使用 `ng serve` 執行應用程式，並在瀏覽器中透過開發者工具測試控制檯。它將顯示所有生命週期事件按上述順序執行。

列印頁面