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 等。