詳解Angular組件之生命周期(二)

更新時間：2021年05月24日 09:14:25 作者：starof

Angular本身監(jiān)督所有Angular組件和指令的生命周期。為了在開發(fā)應用程序時順利進行，您必須了解結果的生命周期。組件是任何Angular應用程序的主要構建塊。因此，必須了解它們才能理解組件生命周期的處理步驟。只有這樣才能在應用程序的開發(fā)中實現(xiàn)。

一、view鉤子

view鉤子有2個，ngAfterViewInit和ngAfterViewChecked鉤子。

1、實現(xiàn)ngAfterViewInit和ngAfterViewChecked鉤子時注意事項

以父組件調用子組件方法中例子為基礎，在父組件中實現(xiàn)ngAfterViewInit和ngAfterViewChecked鉤子。

這兩個鉤子是在組件的模版所有內容組裝完成后，組件模版已經呈現(xiàn)給用戶看了，之后這兩個鉤子方法會被調用。

@ViewChild('child1')
child1:Child1Component; //父組件中獲得子組件的引用

ngOnInit(){
  this.child1.greeting("Tom");
}

ngAfterViewInit(){
  console.log("父組件的視圖初始化完畢");
}

ngAfterViewChecked(){
  console.log("父組件的視圖變更檢測完畢");
}

在子組件中也實現(xiàn)這兩個鉤子

export class Child1Component implements OnInit,AfterViewInit,AfterViewChecked{

  constructor() { }

  ngOnInit() {
  }

  greeting(name: string) {
    console.log("hello" + name);
  }

  ngAfterViewInit(){
    console.log("子組件的視圖初始化完畢");
  }
  
  ngAfterViewChecked(){
    console.log("子組件的視圖變更檢測完畢");
  }
}

在父組件的ngOnInit中不直接調用子組件的greeting()方法，而是通過一個定時器每隔5s去調用一次。

ngOnInit(){
  setInterval(()=>{
    this.child1.greeting("Tom");
  },5000);
}

總結：

1、Init先調用，checked后調用

看1中，首先子組件視圖初始化完畢，然后子組件視圖變更檢測完畢。

2、子組件先于父組件被組裝好

看2中，因為父組件中聲明了2個子組件，所以看到有2個子組件初始化的動作。1號子組件初始化完畢，變更檢測完畢，2號子組件初始化完畢，變更檢測完畢后，父組件的初始化完畢才會被調用，然后父組件的變更檢測完畢才會被調用。

3、ngAfterViewInit只會在初始化完畢被調用一次。

4、定時器觸發(fā)方法后，兩個子組件的變更檢測會被調用，父組件的變更檢測也會被調用。

視圖沒有發(fā)生任何改變，變更檢測也會被調用，實現(xiàn)來ngAfterViewChecked()鉤子的方法都會被調用。

所以ngAfterViewChecked()鉤子一定要寫的精簡以免出現(xiàn)性能問題。

2、在一個變更檢測周期中禁止一個視圖被組裝好之后再去更新視圖

例子：

父組件

有一個message初始化為abc.顯示到模版上。

message:string='abc';

在父組件的ngAfterViewInit中更改message值。

ngAfterViewInit(){
  console.log("父組件的視圖初始化完畢");
  this.message="def";
}

會報錯。ngAfterViewInit()和ngAfterViewChecked()都是在視圖組裝完成后觸發(fā)的，所以在這兩個鉤子中更新組件中被綁定的屬性，觸發(fā)組件視圖的變化，Angular就會拋出異常。

解決辦法：

把代碼放在另一個時間循環(huán)里面。

ngAfterViewInit(){
  console.log("父組件的視圖初始化完畢");
  setTimeout(()=>{
    this.message="def";
  },0);
}

二、content鉤子

包括2個與投影相關的鉤子，ngAfterContentInit()和ngAfterContentChecked()鉤子。

ngAfterContentInit，ngAfterContentChecked和ngAfterViewInit,ngAfterViewChecked類似。

ngAfterViewInit,ngAfteViewChecked是在整個組件的視圖全部組裝完成后調用的。

ngAfterContentInit，ngAfterContentChecked是在被投影進來的內容組裝完成后調用的。

1、Content鉤子的調用順序例子

父組件中實現(xiàn)ngAfterContentInit，ngAfterContentChecked和ngAfterContentInit()

export class AppComponent implements OnInit, AfterViewInit, AfterContentInit,AfterContentChecked{

ngAfterViewInit(){
  console.log("父組件的視圖初始化完畢");
}

ngAfterContentInit(){
  console.log("父組件投影內容初始化完畢");
}
ngAfterContentChecked(){
  console.log("父組件投影內容變更檢測完畢");
}

子組件中也實現(xiàn)這3個接口

export class Child2Component implements OnInit,AfterViewChecked,AfterContentInit,AfterContentChecked{

  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit(){
    console.log("子組件的視圖初始化完畢");
  }
  
  ngAfterContentInit(){
    console.log("子組件投影內容初始化完畢");
  }
  ngAfterContentChecked(){
    console.log("子組件投影內容變更檢測完畢");
  }
}

組裝視圖時，先組裝投影進來的內容，然后組裝子組件中視圖的內容，再加上父組件本身的內容，然后才是父組件視圖初始化完畢。

2、Content鉤子中可以修改模版內容

view鉤子里不能修改模版內容，因為模版內容組裝完畢后不能再修改里面內容。但是Content鉤子里可以。

因為Content鉤子調用時整個視圖還沒有組裝完畢，只是投影進來的內容被組裝完畢了。

父組件中在ngAfterContentInit鉤子里修改message信息不會報錯。

export class AppComponent implements OnInit, AfterViewInit, AfterContentInit,AfterContentChecked{
message:string='abc';
ngAfterViewInit(){
  console.log("父組件的視圖初始化完畢");
}

ngAfterContentInit(){
  console.log("父組件投影內容初始化完畢");
  this.message='def';
}
ngAfterContentChecked(){
  console.log("父組件投影內容變更檢測完畢");
}
ngOnInit(){

}