动态

详情 返回 返回

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.