Angular組件生命週期

生命週期

生命週期列表

接口	描述
ngOnChanges()	1.僅當設置@Input纔會觸發。2.組件綁定的屬性修改時，觸發。
ngOnInit()	每當一個或多個數據綁定輸入屬性更改時 調用。
ngOnInit()	在Angular首先顯示數據綁定屬性並設置指令/組件的輸入屬性以後，初始化指令/組件。調用一次，後第一 ngOnChanges()。
ngDoCheck()	檢測Angular沒法或沒法自行檢測到的更改並採起措施。在每次更改檢測期間（ngOnChanges()和以後）當即調用ngOnInit()。
ngAfterContentInit()	在Angular將外部內容投影到組件的視圖/指令所在的視圖中後做出響應。第一次 調用以後ngDoCheck()。
ngAfterContentChecked()	Angular檢查投影到指令/組件中的內容後響應。在ngAfterContentInit()及以後的調用ngDoCheck()。
ngAfterViewInit()	Angular初始化組件的視圖和子視圖/指令所在的視圖後響應。第一次 調用以後ngAfterContentChecked()。
ngAfterViewChecked()	Angular檢查組件的視圖和子視圖/指令所在的視圖後響應。在ngAfterViewInit()及以後的調用ngAfterContentChecked()。
ngOnDestroy()	在Angular銷燬指令/組件以前進行清理。取消訂閱Observable並分離事件處理程序，以免內存泄漏。在 Angular銷燬指令/組件以前 調用。

單組件生命週期調用過程

custructor
      |
    ngOnChanges   →---------------------------------
      |                                            |
    ngOnInit   //call only once                    |
      |                                            |
    ngDoCheck // call after every change ←----------
      |
    ngAfterContentInit //call only once after docheck
      | 
    ngAfterContentChecked // call only once  after ngAfterContentInit
      | 
    ngAfterViewInit  //call only once after ngAfterContentChecked
      | 
    ngAfterViewChecked  //call only once after ngAfterViewInit
      |
    ngOnDestroy //call only once 
    複製代碼

多組件生命週期調用過程

custructor  
      |
    child constructor     
      | 
    ngOnChanges  →---------------------------------
      |                                            |
    ngOnInit //call only once                    |
      |                                            |
    ngDoCheck // call after every change ←----------
      |
    ngAfterContentInit //call only once after docheck
      | 
    ngAfterContentChecked// call only once  after ngAfterContentInit
      | 
    ngAfterViewInit  //call only once after ngAfterContentChecked
      | 
    ngAfterViewChecked//call only once after ngAfterViewInit
      |
    ngOnDestroy //call only once 
    複製代碼

• 全部組件、指令的constructor逐級調用完畢，
• 在逐個各組件、指令依次調用生命週期鉤子
  日誌參考以下：

this is app constructor                        heroes.component.ts:21 
this is heros parent constructor.....        hero-detail.component.ts:12 
this is child constructor....             app.component.ts:12 
app init...                                        heroes.component.ts:38
this is parent changes...              heroes.component.ts:30
this is parent init                        hero-detail.component.ts:20 
this is child changes....                 hero-detail.component.ts:16 
this is child init....複製代碼

this is app constructor                     heroes.component.ts:22
this is heros parent constructor.....        hero-detail.component.ts:13 
this is child constructor....             app.component.ts:12
app init...                                   app.component.ts:18 
this is app docheck                    app.component.ts:22 
this is app content init             heroes.component.ts:39 
this is parent changes...            heroes.component.ts:31 
this is parent init                     heroes.component.ts:43 
this is parent docheck                  heroes.component.ts:46 
this is parent content init            hero-detail.component.ts:21 
this is child changes....             hero-detail.component.ts:17 
this is child init....                   hero-detail.component.ts:24 
this is child docheck                 hero-detail.component.ts:28 
this is child content init            hero-detail.component.ts:28 複製代碼

本文做者：前端首席體驗師(CheongHu)
聯繫郵箱：simple2012hcz@126.com
版權聲明： 本文章除特別聲明外，均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明出處！複製代碼