Angular - 生命週期鉤子

Angular 應用程式經歷了一整套流程，或者從啟動到應用程式結束都有一個生命週期。

下圖顯示了 Angular 2 應用程式生命週期中的整個流程。

以下是每個生命週期鉤子的描述。

• ngOnChanges - 當資料繫結屬性的值發生變化時，就會呼叫此方法。

• ngOnInit - 這是在 Angular 首次顯示資料繫結屬性後，指令/元件初始化時呼叫的。

• ngDoCheck - 用於檢測和處理 Angular 無法或不會自行檢測的更改。

• ngAfterContentInit - 在 Angular 將外部內容投影到元件檢視之後呼叫。

• ngAfterContentChecked - 在 Angular 檢查投影到元件的內容之後呼叫。

• ngAfterViewInit - 在 Angular 初始化元件檢視和子檢視之後呼叫。

• ngAfterViewChecked - 在 Angular 檢查元件檢視和子檢視之後呼叫。

• ngOnDestroy - 這是在 Angular 銷燬指令/元件之前的清理階段。

以下是如何實現一個生命週期鉤子的示例。在 app.component.ts 檔案中，放置以下程式碼。

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

@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

在上面的程式中，我們呼叫 ngOnInit 生命週期鉤子來特別說明 this.values 引數的值應該設定為“Hello”。

儲存所有程式碼更改並重新整理瀏覽器後，您將獲得以下輸出。