Angular生命週期鉤子

2021-10-05 05:11:13 字數 1749 閱讀 8003

執行的順序與序號保持一致
官方解釋:

當 angular(重新)設定資料繫結輸入屬性時響應。

該方法接受當前和上一屬性值的 ******changes 物件

在 ngoninit() 之前以及所繫結的乙個或多個輸入屬性的值發生變化時都會呼叫。

個人理解:

元件初始化時最先呼叫一次,隨後在每次輸入屬性發生改變時觸發,

輸入屬性 就是父元件向子元件傳遞的值,並且接收乙個引數,

該引數記錄變化前後的值。

實際上,所有具有輸入的元件的輸入值更改時都會呼叫。

官方解釋:

在 angular 第一次顯示資料繫結和設定指令/元件的輸入屬性之後,初始化指令/元件。

在第一輪 ngonchanges() 完成之後呼叫,只呼叫一次。

個人理解:

在第一次資料繫結和設定input的輸入屬性之後,初始化元件。

在第一輪ngonchanges後執行,只執行一次。

可以發生網路請求或者對input的屬性進行判斷等。

預設情況下,使用腳手架都會生成這個函式。

官方解釋:

檢測,並在發生 angular 無法或不願意自己檢測的變化時作出反應。

在每個變更檢測週期中,緊跟在 ngonchanges() 和 ngoninit() 後面呼叫。

個人理解:

當頁面傳送任何改變的時候觸發,改變包括自身屬性的改變以及input輸入屬性的改變等。

官方解釋:

當 angular 把外部內容投影進元件/指令的檢視之後呼叫。

第一次 ngdocheck() 之後呼叫,只呼叫一次。

個人理解:

可以獲取到元件本身、元件中的dom元素以及子元件,

但是無法獲取到子元件中的dom元素。

官方解釋:

每當 angular 完成被投影元件內容的變更檢測之後呼叫。

ngaftercontentinit() 和每次 ngdocheck() 之後呼叫

個人理解:

元件和子元件以及其中的dom元素內容改變的時候執行。

官方解釋:

當 angular 初始化完元件檢視及其子檢視之後呼叫。

第一次 ngaftercontentchecked() 之後呼叫,只呼叫一次。

個人理解:

在元件以及子元件初始化完成後呼叫,只呼叫一次,可以獲取dom元素。

父元件的ngafterviewinit()以及之後的方法 會比子元件的同意方法晚執行。因為父元件包含子元件,子元件渲染好了先執行自己的,然後父元件再執行父元件的。

官方解釋:

每當 angular 做完元件檢視和子檢視的變更檢測之後呼叫。

ngafterviewinit() 和每次 ngaftercontentchecked() 之後呼叫。

個人理解:

每次檢視發生改變的時候觸發,只觸發一次。

父子元件執行的順序和ngafterviewinit同理。

官方解釋:

每當 angular 每次銷毀指令/元件之前呼叫並清掃。

在 angular 銷毀指令/元件之前呼叫。

個人理解:

ngif將元件解除安裝時也會觸發,並且是在ngafterviewchecked之前的。

angular生命週期

指令和元件的例項有乙個生命週期 新建 更新和銷毀。通過實現乙個或多個 angularcore庫里定義的生命週期鉤子介面,開發者可以介入該生命週期中的這些關鍵時刻。每個介面都有唯一的乙個鉤子方法,它們的名字是由介面名再加上ng字首構成的。比如,oninit介面的鉤子方法叫做ngoninit,angul...

angular 生命週期

以下排序是按見面載入時的順利載入,如果直接寫ngdocheck 就要執行4次他的子方法 constructor ngonchanges changes changes void 元件中巢狀的 的內容的變化髒值檢查 ngaftercontentchecked void 元件檢視渲染完成,可以安全的操作...

Angular生命週期

元件特有的鉤子 ngonchanges 當資料繫結輸入屬性的值發生變化時呼叫 ngoninit 在第一次 ngonchanges 後呼叫 ngdocheck 自定義的方法,用於檢測和處理值的改變 ngaftercontentinit 在元件內容初始化之後呼叫 ngaftercontentchecke...