Angular 2 - 生命週期鉤子

Angular 2 應用程式會經歷一整套流程，或者說有一個生命週期，從初始化到應用程式結束。

下圖顯示了 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”。

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