angular組件的生命周期詳解


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

Angular的生命周期鈎子有八種,按照生命周期的執行順序如下

1. ngOnChanges

時機:當被綁定的輸入屬性(@input)的值發生變化時調用,首次調用一定會發生在 ngOnInit之前;該回調方法會收到一個包含當前值和原值的changes對象。在有輸入屬性的情況下才會調用,該方法接受當前和上一屬性值的SimpleChanges對象。如果有輸入屬性,會在ngOnInit之前調用。

接口:OnChanges;

適用范圍: 指令和組件種;

 

2.ngOnInit

時機:在第一輪 ngOnChanges 完成之后調用。 ( 也就是說當每個輸入屬性(@input)的值都觸發了一次ngOnChanges 之后才會調用ngOnInit ,此時所有的輸入屬性都已經有了正確的初始綁定值 );在組件初始化的時候調用,只調用一次,在第一次調用ngOnChanges之后調用

接口: OnInit

適用范圍: 指令和組件種

 

3.ngDoCheck 

時機:在每個 Angular 變更檢測周期中調用;用來檢測所有變化(無論是Angular本身能檢測還是無法檢測的),並作出相應行動。在每次執行“變更檢測”時被調用。在組件定義的屬性或方法變更時調用(用於臟值之檢測,非常耗性能,因為會把所有的屬性和方法都檢測一遍)

接口: DoCheck;

適用范圍: 指令和組件中

 

4.ngAfterContentInit 

時機:當把內容投影進組件之后調用;在組件內容初始化之后調用,在第一次ngDoCheck之后調用,只調用一次

接口:AfterContentInit 

適用范圍: 組件中

5.ngAfterContentChecked

時機:每次完成被投影組件內容的變更檢測之后調用;在組件每次檢查內容放生變更時調用。在ngAfterContentInit和每次ngDoCheck之后調用

接口:AfterContentChecked

適用范圍:組件中

 

6.ngAfterViewInit

時機:初始化完組件視圖及其子視圖之后調用;在組件相應的視圖初始化之后調用,第一次ngAfterContentChecked之后調用,只調用一次

接口:AfterViewInit

適用范圍:組件中

 

7.ngAfterViewChecked

時機:每次做完組件視圖和子視圖的變更檢測之后調用;在組件每次檢查視圖發生變更時調用。ngAfterViewInit和每次ngAfterContentChecked之后調用。

接口:AfterViewChecked;

適用范圍:組件中

 

8.ngOnDestroy

時機:當 Angular 每次銷毀指令 / 組件之前調用;在Angular銷毀指令或組件之前做一些清理工作,比如退訂可觀察對象和移除事件處理器,以免導致內存泄漏。

接口:OnDestroy

適用范圍:指令和組件中

    


免責聲明!

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



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