甚麼是 Component lifecycle ?
angular component 的生命週期，從創建到銷毀
View 跟 Content 差異:
View ⇒ 指的是組件自身的模板。它包括組件模板中定義的所有元素，如 HTML 元素、指令等。
Content ⇒ 指的是從父組件投影到子組件的內容。這通常通過 <ng-content> 元素實現。
階段 | 方法 | 概括 |
創建 | constructor | 當 Component 初始化時執行一次 |
變化偵測 | ngOnInit | 當 Component 初始化完成後執行一次 |
ㅤ | ngOnChanges | 當 Component 的 input 有變更時就就執行 |
ㅤ | ngDoCheck | 當 Component 有檢查到變更時就就運行。 |
ㅤ | ngAfterViewInit | 當 Component 初始化畫面時執行一次 |
ㅤ | ngAfterContentInit | 當 Component 的 ng-content 初始化時執行一次 |
ㅤ | ngAfterViewChecked | 當 Component 的畫面有檢查到變更時就執行 |
ㅤ | ngAfterContentChecked | 當 Component 的 ng-content 有被檢查到變更時就執行 |
渲染 | afterNewRender | 當 “下次的所有” Component 在 DOM 都完成渲染時執行一次 |
ㅤ | afterRender | 當 “所有 “ Component 在 DOM 都完成渲染時就執行 |
銷毀 | ngOnDestroy | 當 Component 被銷毀時執行一次 |
延伸說明：
ngOnChange
- 由於此階段是偵測 input 的變更，所以在初時化時，會比 ngOninit 還要早執行。
- 可以傳遞 SimpleChanges 變數訪問變更狀態
ngOnDestroy
- 當使用 ngIf 隱藏DOM時，也會觸發 ngOnDestory。
- ngOnDestroy 的另一種寫法:
DestroyRef
afterRender , afterNextRender
- 都必須在 constructor 時被呼叫
- 可以用 render callback 來手動執行 DOＭ 操作
- 有分為四種階段
earlyRead | 使用此階段讀取後續計算所必需的任何影響佈局的 DOM 屬性和樣式。如果可能，請避免此階段，最好是 write 和 read 階段。 |
mixedReadWrite | 默認階段。用於任何需要讀取和寫入影響佈局的屬性和樣式的操作。如果可能，請避免此階段，首選明確的 write 和 read 階段。 |
write | 使用此階段來編寫影響佈局的 DOM 屬性和樣式。 |
read | 使用此階段讀取任何影響佈局的 DOM 屬性。 |