動態

詳情 返回 返回

Angular--父子組件生命週期鈎子(lifecycle hooks)執行過程 - 動態 詳情

1.angular 組件生命週期鈎子執行過程

 組件初始化過程中,生命週期鈎子執行順序:

  1. constructor()構造函數,初始化class,(constructor不屬於Angular生命週期鈎子的範疇,這裏只是説明組件組件初始化會先調用構造函數)。
  2. ngOnChanges()--如果組件沒有輸入屬性(@Input()),或者使用時沒有提供任何輸入屬性,那麼angular不會調用它;會調用多次
  3. ngOnInit()--只調用一次,一般用來初始化數據,如請求數據。
  4. ngDoCheck()--緊跟在每次執行變更檢測時的ngOnChanges()和首次執行變更檢測的ngOnInit()後調用;會調用多次
  5. ngAfterContentInit()--當Angular把外部內容投影進組件視圖或指令所在的視圖之後調用,第一次ngDoCheck()之後調用,只調用一次。
  6. ngAfterContentChecked()--每當Angular檢查完被投影到組件或指令中的內容之後調用,在ngAfterContentInit()和每次ngDoCheck()之後調用,會調用多次
  7. ngAfterViewInit()--當Angular初始化玩玩組件視圖及其子視圖之後調用,只調用一次。
  8. ngAfterViewChecked()--當Angular做完組件視圖和子視圖的變更檢測之後調用;在ngAfterViewInit()和每次ngAfterContentChecked()之後調用,會調用多次
  9. ngOnDestroy()--當Angular每次銷燬組件或指令之前調用並清掃。在這裏取消訂閲可觀察對象和分離事件處理器,以防內存泄漏。

 

2.angular 父子組件生命週期鈎子過程

 父子組件生命週期鈎子執行順序,如下圖所示  

  1.首先調用父組件的構造函數,然後調用子組件的構造函數。

  2.當調用父組件的ngAfterContentChecked()鈎子之後,會調用子組件的生命週期函數。

  3.子組件的ngAfterContentChecked()鈎子執行完之後,會在調用子組件的子組件的生命週期鈎子(如果有的話)。

  4.子組件執行ngAfterViewChecked()鈎子後,父組件繼續執行其餘的生命週期鈎子。

  5.當發生變更檢測時,父組件先觸發ngDoCheck() => ngAfterContentChecked(),然後子組件觸發 ngOnChanges() => ngDoCheck() => ngAfterContentChecked() => ngAfterViewChecked(),最後父組件調用ngAfterViewChecked()。

 

user avatar tianmiaogongzuoshi_5ca47d59bef41 頭像 cyzf 頭像 Leesz 頭像 alibabawenyujishu 頭像 haoqidewukong 頭像 jingdongkeji 頭像 razyliang 頭像 leexiaohui1997 頭像 huajianketang 頭像 banana_god 頭像 huichangkudelingdai 頭像 Dream-new 頭像
點贊 65 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.