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在建立組件後馬上調用它。code

接口是可選的?

因爲咱們最終執行的代碼是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()以後。
謹慎使用,由於一些你意想不到的事情也會被視爲變動了ip

ngAfterContentInit()和ngAfterContentChecked()

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

ngAfterViewInit()和ngAfterViewChecked()

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

ngOnDestroy

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

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

相關文章
相關標籤/搜索