[從 0 開始的 Angular 生活]No.28 Angular 的生命週期 Hook - ngOnInit 與 ngOnDestroy

前言

每一個 Angular 元件都有自己的生命周期,元件隨時會被建立也有可能隨時被註銷,之前介紹到結構性指令的時候也有稍微提到一些。而這一篇文章主要介紹的是,元件被建立的過程中程式碼運行的順序是如何?

元件的生命週期 Hook

之前在建立元件時,常常會在元件的 class 內看到兩個方法,但是從來沒有使用過。

分別是:

  • constructor(){}
  • ngOnInit(){}

最先執行 - 建構式 constructor()

constructor 是一個建構式,而建構式會在 class 被建立時,第一時間被執行,換句話說在 Angular 的生命週期裡面,這是第一個執行的程式碼。

不過幾乎不會寫任何程式在 constructor 內,因為當 constructor 執行時,元件尚未被初始化,所以是接不到任何資料的。

儘管如此, constructor 還是有特殊的用途,例如拿來做相依注入 ( DI )

生命週期 Hook - ngOnInit()

從這個名稱來看,應該多少會猜到是 Angular 進行 Init 初始化後會執行的程式碼。

從 ngOnInit() 開始,該元件的初始化、該元件所有必要的屬性繫結都已經完成。

也就是說可以對目前這個元件做一些初始化的動作。

舉例來說

  • 設定屬性的預設值
  • 發出 Ajax 的要求跟伺服器要資料,並把值寫到屬性內,透過屬性繫結呈現在 Template 上

所以這個方法算是蠻常用到的。

當 ngOnInit() 結束後就會正式進入到 Angular 的生命週期,像是進行屬性繫結、事件繫結等等。

生命週期 Hook - ngOnDestroy()

當父元件決定要摧毀目前這個子元件時,這個方法可以讓元件在被摧毀前執行特定的程式碼。

但是這個 Hook 的使用機會比較少,大部分的情況元件裡面的記憶體通常都會自動回收。

所以不需要特別地去寫程式處理這一塊,但是在少數的情況下像是搭配 Rxjs 去做一些非同步事件的訂閱,有些時候確實就必須在這個時間點做處理。

小結

關於元件的生命週期還有很多沒有介紹到,同樣也是可以等用到時在了解即可,在撰寫這篇的過程中也找到一些前輩整理好的資料:

Lifecycle Hooks

0%