Angular每個元件都存在一個生命週期，從建立，變更到銷燬。Angular提供元件生命週期鉤子，把這些關鍵時刻暴露出來，賦予在這些關鍵結點和元件進行互動的能力，掌握生命週期，可以讓我們更好的開發Angular應用

概述

每個介面都有唯一的一個鉤子方法，它們的名字是由介面名再加上ng字首構成的。比如，OnInit介面的鉤子方法叫做ngOnInit， Angular在建立元件後立刻呼叫它

生命週期執行順序

ngOnChanges

在有輸入屬性的情況下才會呼叫，該方法接受當前和上一屬性值的SimpleChanges物件。如果有輸入屬性，會在ngOnInit之前呼叫。

ngOnInit

在元件初始化的時候呼叫，只呼叫一次，在第一次呼叫ngOnChanges之後呼叫

ngDoCheck

在元件定義的屬性或方法變更時呼叫(用於髒值之檢測，非常耗效能，因為會把所有的屬性和方法都檢測一遍），會在ngOnChanges()和ngOnInit()之後

ngAfterContentInit

在元件內容初始化之後呼叫，在第一次ngDoCheck之後呼叫，只呼叫一次

ngAfterContentChecked

在元件每次檢查內容放生變更時呼叫。在ngAfterContentInit和每次ngDoCheck之後呼叫

ngAfterViewInit

在元件相應的檢視初始化之後呼叫，第一次ngAfterContentChecked之後呼叫，只呼叫一次

ngAfterViewChecked

在元件每次檢查檢視發生變更時呼叫。ngAfterViewInit和每次ngAfterContentChecked之後呼叫。

ngOnDestroy

在元件銷燬前呼叫，做一些清理工作，比如退訂可觀察物件和移除事件處理器，以免導致記憶體洩漏。

上面程式碼書寫是按順序的，看下面控制檯列印

現在我們鉤子函式的順序打亂，在看看程式碼

控制檯輸出跟上面是一樣的

constructor和ngOnInit

constructor是ES6中class中新增的屬性，當class類例項化的時候呼叫constructor，來初始化類。Angular中的元件就是基於class類實現的，在Angular中，constructor用於注入依賴。

ngOnInit是Angular中生命週期的一部分，在constructor後執行。在Angular中用於初始化變數和資料繫結等

NgChanges

當我們監聽了OnChanges鉤子。 一旦檢測到該元件(或指令)的輸入屬性發生了變化，Agular就會呼叫ngOnChanges()方法

效果演示

DoCheck

當元件中屬性或函式發生變化時DoCheck會執行髒值檢測，遍歷所有變數

效果演示