angular生命点接口生命周期钩子

布满荆棘的人生 2022-05-14 02:13 259阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th>生命点接口</th> 
   <th align="center">周期钩子</th> 
   <th align="right">调用方式</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>OnChanges</td> 
   <td align="center">ngOnChanges()</td> 
   <td align="right">简单输入变量本值发生变化时调用，第一次调用在OnInit之前</td> 
  </tr> 
  <tr> 
   <td>OnInit</td> 
   <td align="center">ngOnInit（）</td> 
   <td align="right">初始化时调用</td> 
  </tr> 
  <tr> 
   <td>DoCheck</td> 
   <td align="center">ngDoCheck（）</td> 
   <td align="right">周期更改检测，每次变更周期都会调用</td> 
  </tr> 
  <tr> 
   <td>AfterContentInit</td> 
   <td align="center">ngAfterContentInit（）</td> 
   <td align="right">内容完成初始化投影后调用</td> 
  </tr> 
  <tr> 
   <td>AfterContentChecked</td> 
   <td align="center">ngAfterContentChecked（）</td> 
   <td align="right">紧跟上一条完成初始化投影后调用，以及每次变更周期在DoCheck之后调用</td> 
  </tr> 
  <tr> 
   <td>AfterViewInit</td> 
   <td align="center">ngAfterViewInit（）</td> 
   <td align="right">组件和子组件完成视图初始化时调用</td> 
  </tr> 
  <tr> 
   <td>AfterViewChecked</td> 
   <td align="center">ngAfterViewChecked（）</td> 
   <td align="right">紧跟上一条完成组件和子组件完成视图后调用，每次变更周期在AfterContentChecked之后调用</td> 
  </tr> 
  <tr> 
   <td>OnDestroy</td> 
   <td align="center">ngOnDestroy（）</td> 
   <td align="right">销毁时调用</td> 
  </tr> 
 </tbody> 
</table>

**声明周期顺序解释**  
● ngOnChanges 当angular绑定的输入属性发生变化时响应，首次调用一定会发生在ngOnInit之前  
● ngOnInit 初始化指令/组件，在第一轮ngOnChanges完成之后调用，只调用一次  
● ngDoCheck在每个angular变更检测周期中调用，在ngOnChanges和ngOnInit之后调用  
● ngAfterContentInit 把内容渲染到组件之后调用，第一次ngDoCheck之后调用，只适用于组件，只调用一次  
● ngAfterContentChecked 每次完成内容到组件的渲染的变更检测后调用，ngAfterContentInit和每次NgDoCheck之后调用，只适用于组件  
● ngAfterViewInit 组件视图及其子视图初始化完成之后调用，第一次ngAfterContentChecked之后调用，只调用一次，只适合组件  
● ngAfterViewChecked 每次做完组件视图和子视图的变更检测之后调用，ngAfterViewInit和每次ngAfterContentChecked之后调用，  
只适合组件  
● ngOnDestroy 在Angular销毁指令/组件之前调用。