Angular生命周期理解


Angular每個組件,包含根組件和每一級的子組件,都存在一個生命周期,從創建,變更到銷毀。Angular提供組件生命周期鈎子,把這些關鍵時刻暴露出來,賦予在這些關鍵結點和組件進行交互的能力。

在Angular中,提供了8個生命周期鈎子函數:

這8個生命周期鈎子函數分為兩類:第一類:指令與組件共有的鈎子,第二類:只有組件才有的鈎子

1. ngOnChanges:當被綁定的輸入屬性的值發生變化時調用,首次調用一定會發生在 ngOnInit之前。

范圍:指令和組件,接口名稱:OnChanges

ngOnchanges在父組件(初始化或修改)子組件的輸入參數下調用,用在有輸入屬性的子組件。

用處:當Angular設置數據綁定輸入屬性發生變化時響應。

時機:當被綁定的輸入屬性的值發生變化時調用,不過首次調用是會發生在ngOnInit()之前的。

ngOnChanges()方法獲取了一個對象,它可以同時觀測1個/多個綁定的屬性值,它把每個發生變化的屬性名都映射到了一個SimpleChange對象, 該對象中有屬性的當前值和前一個值。

觸發條件

@input屬性(輸入屬性)發生變化時,會調用。非此屬性,不會調用。

當輸入屬性為對象時,當對象的屬性值發生變化時,不會調用,當對象的引用變化時會觸發。

輸入屬性,使用@Input裝飾的屬性,這里還需要注意不可變對象,在Angular中,典型的不可變對象是string類型,但所有自定義對象均為可變對象,如:user:{name:string},可變對象即使被定義為輸入屬性,也不會觸發OnChanges方法。當修改子組件參數時,只有以下情況ngOnchanges才會被調用

子組件的參數為輸入屬性且為不可變對象變化時 

輸入屬性:@Input()屬性

不可變對象:原始值(undefined、null、布爾值、數字和字符串)

可變對象:對象(包括數組和函數)

可變對象

var greeting = 'hello';

greeting = 'hello world';

greeting 的值發生改變,因為其指向的字符串地址從‘hello’指向了‘hello world’

不可變對象

var user = {name:Tom};

user.name = "Jerry";

user的指向的內存地址並沒有改變,改變的是user對象中的name屬性

ngOnChanges 鈎子接收一個類型為 SimpleChange 的映射對象,包括新值和舊值

 

2.ngOnInit : 在第一輪 ngOnChanges 完成之后調用。發生於構造函數之后,用於初始化指令/組件,主要用於數據綁定的輸入屬性處理。

( 說當每個輸入屬性的值都被觸發了一次 ngOnChanges 之后才會調用 ngOnInit ,此時所有輸入屬性都已經有了正確的初始綁定值 )

范圍:指令和組件,接口名稱:OnInit

開發中我們經常在ngOnInit做一些初始化的工作,而這些工作盡量要避免在constructor中進行,constructor中應該只進行依賴注入而不是進行真正的業務操作。

 

3.ngDoCheck : 在每個 Angular 變更檢測周期中調用。用於變更的檢測

范圍:指令和組件,接口名稱:DoCheck

Angular的變更檢測機制配合zone.js來實現,保證組件變化和頁面變化同步,

瀏覽器中任何異步事件都會觸發檢測機制,

檢測模版所有綁定屬性,若改變則相應區域會被更新

需要注意的是:變更檢測機制只會把組件屬性的改變反應到模版上,不會改變組件值

Angular中,每個組件都有屬於自己的變更檢測器,當任何一個變更檢測器檢查到變化,zone.js會根據組件的變更檢測策略來檢查組件,以判斷組件是否需要更新它的模版。

檢查策略: 

1.default 

默認情況下所有組件都使用Default策略;

2.OnPush策略 

如果所有組件都使用Default策略,不管變更發生在哪個組件上,zone.js會檢測整個組件樹,但會跳過使用OnPush策略的組件,OnPush策略的組件只有當其輸入屬性(即@Input)發生改變時,zone.js才會檢測這個組件及其子組件。

 

4.ngAfterContentInit :當把內容投影進組件之后調用。

范圍:組件,接口:AfterContentInit

5.ngAfterContentChecked : 每次完成被投影組件內容的變更檢測之后調用。

范圍:組件,接口:AfterContentChecked

 

6.ngAfterViewInit :初始化完組件視圖及其子視圖之后調用。

范圍:組件,接口:AfterViewInit

 

 

7.ngAfterViewChecked:每次做完組件視圖和子視圖的變更檢測之后調用。

范圍:組件,接口:AfterViewChecked

 

8.ngOnDestroy : 當 Angular 每次銷毀指令 / 組件之前調用。

范圍:指令和組件,接口:OnDestroy

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM