Angular生命週期

生命週期鉤子

官網解釋

Angular 建立它，渲染它，建立並渲染它的子組件，在它被綁定的屬性發生變化時檢查它，並在它從 DOM 中被移除前銷燬它。
Angular 提供了生命週期鉤子，把這些關鍵生命時刻暴露出來，賦予你在它們發生時採起行動的能力。
除了那些組件內容和視圖相關的鉤子外,指令有相同生命週期鉤子。

我的理解

生命週期函數通俗的講就是組件建立、組件更新、組件銷燬的時候會觸發的一系列的方法。

組件生命週期鉤子概覽

當 Angular 使用構造函數新建一個組件或指令後，就會按下面的順序在特定時刻調用這些 生命週期鉤子方法
每一個接口都有惟一的一個鉤子方法，它們的名字是由接口名再加上ng前綴構成的，好比OnInit接口的鉤子方法叫作ngOnInit.

一、生命週期鉤子分類 – – – 基於指令與組件的區別來分類

1.1 指令與組件共有的鉤子

1.ngOnChanges
2.ngOnInit
3.ngDoCheck
4.ngOnDestroy

1.2 組件特有的鉤子

1.ngAfterContentInit
2.ngAfterContentChecked
3.ngAfterViewInit
4.ngAfterViewChecked

二、生命週期鉤子的做用及調用順序

一、ngOnChanges – 當數據綁定輸入屬性的值發生變化時調用
二、ngOnInit – 在第一次 ngOnChanges 後調用
三、ngDoCheck – 自定義的方法，用於檢測和處理值的改變
四、ngAfterContentInit – 在組件內容初始化以後調用
五、ngAfterContentChecked – 組件每次檢查內容時調用
六、ngAfterViewInit – 組件相應的視圖初始化以後調用
七、ngAfterViewChecked – 組件每次檢查視圖時調用
八、ngOnDestroy – 指令銷燬前調用

三、生命週期加載順序

3.1 首次加載

3.2 點擊輸入框，綁定數據變化以後，加載的鉤子

組件生命週期鉤子詳解

一、constructor

constructor 初始化類。Angular中的組件就是基於class類實現的，在Angular中，constructor 用於注入依賴。組件的構造函數會在全部的生命週期鉤子以前被調用，它主要用於依賴注入或執行簡單的數據初始化操做。

一、ngOnchanges()

在父組件初始化或修改子組件的輸入參數時調用，如圖所示，在父組件中修改子組件的值，會觸發子組件的ngOnchanges。

二、ngOnInit()

在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件。在第一輪 ngOnChanges() 完成以後調用，只調用一次。能夠在這個鉤子函數中請求數據

三、ngDoCheck()

檢測並在發生 Angular 沒法或不肯意本身檢測的變化時做出反應。在每一個 Angular 變動檢測週期中調用， 在ngOnChanges() 和 ngOnInit()以後。

四、ngAfterContentInit()

當把內容投影進組件以後調用。第一次 ngDoCheck() 以後調用，只調用一次

五、 ngAfterContentChecked()

初始化完組件視圖及其子視圖以後調用。第一 次 ngAfterContentChecked() 以後調用，只調用一次。在這裏能夠操做DOM

六、ngAfterViewChecked()

每次作完組件視圖和子視圖的變動檢測以後調用。 ngAfterViewInit()和每次ngAfterContentChecked() 以後 調用。

七、ngOnDestroy()

當 Angular 每次銷燬指令/組件以前調用並清掃。在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄 漏。在 Angular 銷燬指令/組件以前調用。好比：移除事件監聽、清除定時器、退訂 Observable 等。