Angular4学习笔记（九）- 生命周期钩子简介

简介

Angular 指令的生命周期，它是用来记录指令从建立、应用及销毁的过程。Angular 提供了一系列与指令生命周期相关的钩子，便于咱们监控指令生命周期的变化，并执行相关的操做。Angular 中全部的钩子以下图所示：

分类

• 指令与组件共有的钩子
  • ngOnChanges
  • ngOnInit
  • ngDoCheck
  • ngOnDestroy
• 组件特有的钩子
  • ngAfterContentInit
  • ngAfterContentChecked
  • ngAfterViewInit
  • ngAfterViewChecked

调用顺序

1. ngOnChanges - 当数据绑定输入属性的值发生变化时调用
2. ngOnInit - 在第一次 ngOnChanges 后调用
3. ngDoCheck - 自定义的方法，用于检测和处理值的改变
4. ngAfterContentInit - 在组件内容初始化以后调用
5. ngAfterContentChecked - 组件每次检查内容时调用
6. ngAfterViewInit - 组件相应的视图初始化以后调用
7. ngAfterViewChecked - 组件每次检查视图时调用
8. ngOnDestroy - 指令销毁前调用

如何实现

要实现生命周期钩子，只需实现对应的接口便可，如实现ngOnChanges钩子只需实现OnChanges接口便可：

export class XxxComponent implements 
  OnInit, OnChanges, 
  DoCheck, AfterContentInit, 
  AfterContentChecked, AfterViewChecked, 
  AfterViewInit, OnDestroy { 
    // balabalabala... 
}

ngOnChanges

触发条件

OnChanges只对输入的不可变对象起做用。
输入属性之前说过，使用@Input装饰的属性，这里还须要注意不可变对象，在Angular中，典型的不可变对象是string类型，但全部自定义对象均为可变对象，如：user:{name:string}，可变对象即便被定义为输入属性，也不会触发OnChanges方法。

ngOnChanges方法参数

ngOnChanges方法有一个SimpleChanges类型的参数，它实际上是一个类型为SimpleChange，而且键值为属性名的数组:

export interface SimpleChanges { [propName: string]: SimpleChange; }

而SimpleChange的结构以下：

export declare class SimpleChange {
    previousValue: any;
    currentValue: any;
    firstChange: boolean;
    constructor(previousValue: any, currentValue: any, firstChange: boolean);
    /**
     * Check whether the new value is the first value assigned.
     */
    isFirstChange(): boolean;
}

假如咱们的组件中有一个知足触发OnChanges钩子条件的属性名叫inputVal，那么能够经过以下方式获取它变化先后的值：

ngOnChanges(changes: SimpleChanges): void {
    console.log('ngOnChanges中inputVal变动前值为：'+ changes['inputVal'].previousValue);
    console.log('ngOnChanges中inputVal变动后值为：'+ changes['inputVal'].currentValue);
  }

ngOnInit

在第一次 ngOnChanges 执行以后调用，而且只被调用一次。它主要用于执行组件的其它初始化操做或获取组件输入的属性值。

ngDoCheck

当组件的输入属性发生变化时，将会触发 ngDoCheck 方法。咱们可使用该方法，自定义咱们的检测逻辑。

特别注意，使用时要比较精准的定义检查位置，不然会形成性能问题，由于任何变化，好比鼠标的点击事件或键盘的输入事件都会触发ngDoCheck。

ngAfterContentInit

在组件使用 ng-content 指令的状况下，Angular 会在将外部内容放到视图后用。它主要用于获取经过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。

ngAfterContentChecked

在组件使用 ng-content 指令的状况下，Angular 会在检测到外部内容的绑定或者每次变化的时候调用。

ngAfterViewInit

在组件相应的视图初始化以后调用，它主要用于获取经过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。

ngAfterViewChecked

组件每次检查视图时调用

ngOnDestroy

在指令被销毁前，将会调用 ngOnDestory 方法。它主要用于执行一些清理操做，好比：移除事件监听、清除定时器、退订 Observable 等。