Angular2 组件生命周期

约定不等于承诺〃 2021-06-26 16:06 472阅读 0赞

## 1. 说明 ##

`Angular`每个组件都存在一个生命周期，从创建，变更到销毁。`Angular`提供组件生命周期钩子，把这些关键时刻暴露出来，赋予在这些关键结点和组件进行交互的能力。

## 2. 接口 ##

按照生命周期执行的先后顺序，`Angular`生命周期接口如下所示

<table> 
 <thead> 
  <tr> 
   <th align="left">名称</th> 
   <th align="left">时机</th> 
   <th align="left">接口</th> 
   <th align="left">范围</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>ngOnChanges</code></td> 
   <td align="left">当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在 ngOnInit之前。</td> 
   <td align="left">OnChanges</td> 
   <td align="left">指令和组件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>ngOnInit</code></td> 
   <td align="left">在第一轮 ngOnChanges 完成之后调用。 ( 译注：也就是说当每个输入属性的值都被触发了一次 ngOnChanges 之后才会调用 ngOnInit ，此时所有输入属性都已经有了正确的初始绑定值 )</td> 
   <td align="left">OnInit</td> 
   <td align="left">指令和组件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>ngDoCheck</code></td> 
   <td align="left">在每个 Angular 变更检测周期中调用。</td> 
   <td align="left">DoCheck</td> 
   <td align="left">指令和组件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>ngAfterContentInit</code></td> 
   <td align="left">当把内容投影进组件之后调用。</td> 
   <td align="left">AfterContentInit</td> 
   <td align="left">组件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>ngAfterContentChecked</code></td> 
   <td align="left">每次完成被投影组件内容的变更检测之后调用。</td> 
   <td align="left">AfterContentChecked</td> 
   <td align="left">组件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>ngAfterViewInit</code></td> 
   <td align="left">初始化完组件视图及其子视图之后调用。</td> 
   <td align="left">AfterViewInit</td> 
   <td align="left">组件</td> 
  </tr> 
  <tr> 
   <td align="left"></td> 
   <td align="left">after initializing the component’s views and child views.</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left"><code>ngAfterViewChecked</code></td> 
   <td align="left">每次做完组件视图和子视图的变更检测之后调用。</td> 
   <td align="left">AfterViewChecked</td> 
   <td align="left">组件</td> 
  </tr> 
  <tr> 
   <td align="left"><code>ngOnDestroy</code></td> 
   <td align="left">当 Angular 每次销毁指令 / 组件之前调用。</td> 
   <td align="left">OnDestroy</td> 
   <td align="left">指令和组件</td> 
  </tr> 
 </tbody> 
</table>

## 3. 示例 ##

我们用一个示例展示一些常用的生命周期函数的用法，主要包括`ngOnChanges`，`ngOnInit`，`ngDoCheck`，`ngOnDestroy`，实现的示例代码如下：

`birthday`组件中实现了对应的生命周期函数，并在`App`组件中调用

import { Component, Input, OnChanges, OnInit, DoCheck, OnDestroy } from '@angular/core';
    
    @Component({
    
        moduleId: 'birthday',
    
        selector: 'birthday',
    
        template: ` <h5>your birthday is { {birthday}}</h5> `,
    
    })
    
    export class BirthdayComponent implements OnChanges, OnInit, DoCheck, OnDestroy { 
    
        @Input()
    
        birthday;
    
    
    
        ngOnChanges(changes) {
    
            console.log('ngOnChanges');
    
        }
    
    
    
        ngOnInit() {
    
            console.log('ngOnInit');
    
        }
    
    
    
        ngDoCheck() {
    
            console.log('ngDoCheck');
    
        }
    
    
    
        ngOnDestroy() {
    
            console.log('ngOnDestroy');
    
        }
    
    }
    
    
    
    @Component({
    
        moduleId: 'app',
    
        selector: 'app',
    
        template: ` <birthday [birthday]="birthday"></birthday> `,
    
        directives: [BirthdayComponent]
    
    })
    
    export class AppComponent { 
    
        birthday: Date = new Date(2012, 10, 10);
    
    }

在`Chrome`中运行，得到的结果如下，可以清楚的看到按照`ngOnChanges`，`ngOnInit`，`ngDoCheck`的顺序执行，当组件销毁时会调用`ngOnDestroy`。  
![这里写图片描述][20180826110109601]

[20180826110109601]: /images/20210626/2bec46cfd24542fa895f4c22fdc48bc6.png