Angular4學習筆記——生命週期鉤子

接口和鉤子

在介紹生命週期的相關概念以前，能夠先複習一下TypeScript對於接口的概念。
在這裏主要使用的是類接口及其實現：

interface ClockInterface {
    currentTime: Date;
}
// 該寫法表示明確的強制一個Clock類符合ClockInterface接口
// 該接口中currentTime是一個Date類型的數據（並無實際使用），創造Clock實例時須要傳入參數h和m，都是數字類型。
class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

在Angular中，也針對生命週期的不一樣時刻給予了一些接口，你能夠在代碼中強制本身的組件/指令在建立時實現這些接口。
而每一個接口都有惟一的一個鉤子方法，它們的名字是由接口名再加上ng前綴構成的。好比，OnInit接口的鉤子方法叫作ngOnInit，Angular在建立組件後馬上調用它。

接口是可選的？

因爲咱們最終執行的代碼是JavaScript,而在JS中是沒有接口概念的，接口只是用來強化類的概念，通過編譯以後接口消失了。
因此若是須要使用生命週期，只要在咱們的代碼中寫上鉤子函數便可，Angular會找到並調用像ngOnInit()這樣的鉤子方法，有沒有接口無所謂。
可是最好在寫代碼的時候不要省去接口，享受TypeScript所帶來的強類型好處~~~

生命週期的順序

指令和組件的實例有一個生命週期：新建、更新和銷燬。
當Angular使用構造函數新建一個組件或指令後，就會按下面的順序在特定時刻調用這些生命週期鉤子方法：

ngOnChanges()

用處：當Angular設置數據綁定輸入屬性發生變化時響應。
時機：當被綁定的輸入屬性的值發生變化時調用，不過首次調用是會發生在ngOnInit()以前的。
ngOnChanges()方法獲取了一個對象，它能夠同時觀測1個/多個綁定的屬性值，它把每一個發生變化的屬性名都映射到了一個SimpleChange對象， 該對象中有屬性的當前值和前一個值。

// Angular定義SimpleChanges類構造函數三個參數分別爲上一個值，當前值和是否第一次變化(firstChange: boolean)，這些changes均可以調用。
ngOnChanges(changes: SimpleChanges) {
  ... some code about changes here...
}

ngOnInit()

用處：在Angular第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件。
時機：在第一輪ngOnChanges()完成以後調用，只調用一次。
要明確一點就是，雖然接口中有一個constructor構造函數，可是在這裏最好只對局部變量進行初始化以外什麼都不作，經過ngOnInit()獲取初始數據，並且是放在構造函數後面。

ngDoCheck()

用處：檢測那些Angular自身沒法捕獲的變動
時機：在每一個Angular變動檢測週期中調用，ngOnChanges()和ngOnInit()以後。
謹慎使用，由於一些你意想不到的事情也會被視爲變動了

ngAfterContentInit()和ngAfterContentChecked()

只適用於組件
用處：在外來內容被投影到組件中以後/投影組件內容的變動檢測以後調用
時機：
ngAfterContentInit()--第一次ngDoCheck()以後調用，且只調用一次；
ngAfterContentChecked()--每次ngDoCheck()以後調用，若是須要調用ngAfterContentInit()，則在ngAfterContentInit()調用以後

ngAfterViewInit()和ngAfterViewChecked()

只適用於組件
用處：初始化完/檢測變動完組件視圖及其子視圖以後調用。
時機：跟相應的content鉤子相似，在對應的content鉤子後面。

ngOnDestroy

用處：反訂閱可觀察對象和分離事件處理器，以防內存泄漏
時機：銷燬指令/組件以前調用並清掃

釋放那些不會被垃圾收集器自動回收的各種資源的地方。取消那些對可觀察對象和DOM事件的訂閱。中止定時器。註銷該指令曾註冊到全局服務或應用級服務中的各類回調函數。