LifeCycle Hook Function

在 Angular 中,

每個 Component & Directive 都有生命週期,

其由一系列的生命週期 Hook 所組成,

LifeCycle Hook Function 讓開發者在 Component & Directive 的 不同階段 做操作

Angular LifeCycle Hook：

  • constructor => ES6 提供給 class 的建構子, 並不屬於 Angular

  • ngOnChanges => 當 Component 的一個 輸入屬性發生變化 時調用

  • ngOnInit => 當 Component 初始化完成 時調用, 此時 Component 的輸入屬性和輸出屬性都已經確定

  • ngDoCheck => 當 Angular 檢查 Component 的變化 時調用, 通常是由於輸入屬性發生變化或因為事件觸發引起的

  • ngAfterContentInit => 當 Component 的 Content 完成初始化 之後調用, 通常用於對 Component 的 Content 執行操作

  • ngAfterContentChecked => 當 Angular 檢查 Component 的 Content 發生變化 時調用

  • ngAfterViewInit => 當 Component 的 View 完成初始化 之後調用, 通常用於對 Component 的 View 執行操作

  • ngAfterViewChecked => 當 Angular 檢查 Component 的 View 發生變化 時調用

  • ngOnDestroy => 當 Component 被摧毀 時調用, 通常用於釋放 Component 所占用的資源

整理

可以透過實現這些 LifeCycle Hook,

達成對 Component 進行固定的操作,

如在 ngAfterViewInit 中可以獲取 Component 的 DOM 元素,

在 ngOnDestroy 中可以取消 Component 所 訂閱 的資源,

以免造成資源浪費和潛在的內存泄漏等問題,

了解 LifeCycle Hook 的執行順序和調用時機,

能夠更好的理解 Angular 中 Component & Directive 的運行機制

參考