Angular 元件執行順序 & 生命週期

ng cli產出的元件，底下都會有以下兩個方法(Method)

• constructor Typescript的構建物件函式
• ngOnInit Angular元件初始化時執行

執行結果

• constructor 構建一個物件首先執行的函式，在這裡引入物件所需用到的服務
• ngOnInit 生命週期 元件初始化，進入此元件做的事情，此時畫面尚未生成完畢
• ngAfterViewInit 生命週期 當畫面(View)渲染完畢才做的事 例如抓取頁面上的某個節點，若在畫面出現之前執行的話會抓不到元素而變成undefined
• ngOnDestroy 生命週期 離開、結束此元件時做的事情 刷新頁面或離開頁面都不會觸發效果 因為是這兩件事情主導權不在Angular手上，而是由瀏覽器銷毀 在未來提及Rouing切換頁面元件時可以看到效果

以人類的生命週期來對應的話，分別是

• 受精階段: constructor 建構胚胎卵，注入所需要的養分服務，以幫助未來成長
• 胎兒階段: ngOnInit 元件在媽媽的肚子裡面長好了
• 嬰兒階段: ngAfterViewInit 畫面生出來了，我們肉眼看的見四肢了
• 死亡階段: destroy 生命離開肉體軀殼，被大自然回收了