Angular 2 Directive Lifecycle

在介绍 Angular 2 Directive Lifecycle (生命周期) 之前，我们先来介绍一下 Angular 2 中 Directive (指令) 与 Component (组件) 的关系。

图片描述

我们再来看一下 Angular 2 中定义的指令和组件接口：

// angular2/packages/core/src/metadata/directives.ts

export interface Directive {
   selector?: string;  // 用于定义组件在HTML代码中匹配的标签
   inputs?: string[];  // 指令的输入属性
   outputs?: string[];  // 指令的输出属性
   host?: {[key: string]: string};  // 绑定宿主的属性、事件等
   providers?: Provider[];  // 设置指令及其子指令可以用的服务
   exportAs?: string;  // 导出指令，使得可以在模板中调用
   queries?: {[key: string]: any};  // 设置指令的查询条件
}

export interface Component extends Directive {
   changeDetection?: ChangeDetectionStrategy;  // 指定组件使用的变化检测策略
   viewProviders?: Provider[];     // 设置组件及其子组件(不含ContentChildren)可以用的服务
   moduleId?: string;  // 包含该组件模块的 id，它被用于解析 模版和样式的相对路径
   templateUrl?: string;  // 为组件指定一个外部模板的URL地址
   template?: string;  // 为组件指定一个内联的模板
   styleUrls?: string[];  // 为组件指定一系列用于该组件的样式表文件
   styles?: string[];  // 为组件指定内联样式
   animations?: any[];  // 设置组件相关动画
   encapsulation?: ViewEncapsulation;  // 设置组件视图包装选项
   interpolation?: [string, string];  // 设置默认的插值运算符，默认是"{{"和"}}"
   entryComponents?: Array<Type<any>|any[]>;  // 设置需要被提前编译的组件
}

通过观察上图与 Angular 2 中指令与组件的接口定义，我们可以总结出指令与组件之间的关系：组件继承于指令，并扩展了与 UI 视图相关的属性，如 template、styles、animations、encapsulation 等。

下面我们进入正题，开始介绍 Angular 2 指令的生命周期，它是用来记录指令从创建、应用及销毁的过程。Angular 2 提供了一系列与指令生命周期相关的钩子，便于我们监控指令生命周期的变化，并执行相关的操作。Angular 2 中所有的钩子如下图所示：

图片描述

怎么那么多钩子，是不是被吓到了，没事我们基于指令与组件的区别来分个类：

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

Angular 2 指令生命周期钩子的作用及调用顺序

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

Angular 2 指令生命周期钩子详解

在详细介绍指令生命周期钩子之前，我们先来介绍一下构造函数：

constructor

组件的构造函数会在所有的生命周期钩子之前被调用，它主要用于依赖注入或执行简单的数据初始化操作。

import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {{name}}</p>
  `,
})
export class AppComponent {
  name: string = '';

  constructor(public elementRef: ElementRef) { // 使用构造注入的方式注入依赖对象
    this.name = 'Semlinker'; // 执行初始化操作
  }
}

ngOnChanges

当数据绑定输入属性的值发生变化的时候，Angular 将会主动调用 ngOnChanges 方法。它会获得一个 SimpleChanges 对象，包含绑定属性的新值和旧值，它主要用于监测组件输入属性的变化。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-child name="exe-child-component"></exe-child>
  `,
})
export class AppComponent { }

child.component.ts

import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';

@Component({
    selector: 'exe-child',
    template: `
      <p>Child Component</p>  
      <p>{{ name }}</p>
    `
})
export class ChildComponent implements OnChanges{
    @Input()
    name: string;

    ngOnChanges(changes: SimpleChanges) {
        console.dir(changes);
    }
}

以上代码运行后，浏览器的输出结果：

图片描述

ngOnInit

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

import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'exe-child',
    template: `
     <p>父组件的名称：{{pname}} </p>
    `
})
export class ChildComponent implements OnInit {
    @Input()
    pname: string; // 父组件的名称

    constructor() {
        console.log('ChildComponent constructor', this.pname); // Output：undefined
    }

    ngOnInit() {
        console.log('ChildComponent ngOnInit', this.pname); // output: 输入的pname值
    }
}

ngOnDestory

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

@Directive({
    selector: '[destroyDirective]'
})
export class OnDestroyDirective implements OnDestroy {
  sayHello: number;
  
  constructor() {
    this.sayHiya = window.setInterval(() => console.log('hello'), 1000);
  }
  
  ngOnDestroy() {
     window.clearInterval(this.sayHiya);
  }
}

ngDoCheck

当组件的输入属性发生变化时，将会触发 ngDoCheck 方法。我们可以使用该方法，自定义我们的检测逻辑。它也可以用来加速我们变化检测的速度。

ngAfterContentInit

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

具体使用示例，请参考 - Angular 2 ContentChild & ContentChildren

ngAfterContentChecked

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

ngAfterViewInit

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

具体使用示例，请参考 - Angular 2 ViewChild & ViewChildren

ngAfterViewChecked

组件每次检查视图时调用

Angular 2 LifecycleHooks 、SimpleChanges 等相关接口

LifecycleHooks 接口

export interface OnChanges { ngOnChanges(changes: SimpleChanges): void; }

export interface OnInit { ngOnInit(): void; }

export interface DoCheck { ngDoCheck(): void; }

export interface OnDestroy { ngOnDestroy(): void; }

export interface AfterContentInit { ngAfterContentInit(): void; }

export interface AfterContentChecked { ngAfterContentChecked(): void; }

export interface AfterViewInit { ngAfterViewInit(): void; }

export interface AfterViewChecked { ngAfterViewChecked(): void; }

SimpleChange

// 用于表示变化对象
export class SimpleChange {
  constructor(public previousValue: any, 
      public currentValue: any, 
      public firstChange: boolean) {}
      
  // 标识是否为首次变化
  isFirstChange(): boolean { return this.firstChange; }
}

SimpleChanges

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

Angular 2 View 详解

在 Angular 2 中 View (视图) 由三个部分组成：

Elements - 元素
Bindings - 绑定
Events - 事件

在 Angular 2 TemplateRef & ViewContainerRef 这篇文章中，我们介绍了 Angular 2 支持的 View(视图) 类型：

Embedded Views - Template 模板元素
Host Views - Component 组件

接下来我们来分析一下组件对应的 Host Views，具体示例如下：

child.component.ts

import { Component, Input, SimpleChanges, OnChanges, AfterViewChecked } from '@angular/core';

@Component({
    selector: 'exe-child',
    template: `
      <p>Child Component</p>  
      <p>{{ name }}</p>
    `
})
export class ChildComponent implements OnChanges, AfterViewChecked{
    @Input()
    name: string;

    ngOnChanges(changes: SimpleChanges) {
        console.dir(changes);
        setTimeout(() => {
            this.name = 'exe-child-component-1'
        }, 0);
    }

    ngAfterViewChecked() {
        console.log('ngAfterViewChecked hook has been called');
    }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-child name="exe-child-component"></exe-child>
  `,
})
export class AppComponent { }

以上代码运行后，浏览器的输出结果：

图片描述

接下来我们来分析一下 ChildComponent 组件，先来看一下编译后的 component.ngfactory.js 文件。

ChildComponent/component.ngfactory.js 代码片段：

function View_ChildComponent0(viewUtils,parentView,parentIndex,parentElement) {
  var self = this;
  ...
  self._expr_7 = jit_CD_INIT_VALUE5;
}

/*
* 用于初始化模板内的元素
* ChildComponent - template
* <p>Child Component</p>  
* <p>{{ name }}</p>
*/
View_ChildComponent0.prototype.createInternal = function(rootSelector) {
  var self = this;
  var parentRenderNode = self.renderer.createViewRoot(self.parentElement);
  ...
  
  // (1) 创建p元素 - <p>Child Component</p>  
  self._el_1 = jit_createRenderElement6(self.renderer,parentRenderNode,
      'p', jit__object_Object_7,self.debug(1,1,6));
      
  // 创建文本元素，设置内容为 - 'Child Component'
  self._text_2 = self.renderer.createText(self._el_1,'Child Component',
      self.debug(2,1,9));
  
  // (2) 创建p元素 - <p>{{ name }}</p>
  self._el_4 = jit_createRenderElement6(self.renderer,parentRenderNode,
       'p', jit__object_Object_7,self.debug(4,2,6));
       
  self._text_5 = self.renderer.createText(self._el_4,'',self.debug(5,2,9));
  
  self.init(null,(self.renderer.directRenderer? null: [...]
  ),null);
  return null;
};

// 执行变化检测                                                       
View_ChildComponent0.prototype.detectChangesInternal = function(throwOnChange) {
  var self = this;
  self.debug(5,2,9);
  var currVal_7 = jit_inlineInterpolate8(1,'',self.context.name,'');
  if (jit_checkBinding9(throwOnChange,self._expr_7,currVal_7)) {
    self.renderer.setText(self._text_5,currVal_7);
    self._expr_7 = currVal_7;
  }
};

ChildComponent/wrapper.ngfactory.js 代码片段：

function Wrapper_ChildComponent() {
  var self = this;
  self._changed = false;
  self._changes = {}; // 创建Changes对象
  self.context = new jit_ChildComponent0();
  self._expr_0 = jit_CD_INIT_VALUE1; // {}
}

Wrapper_ChildComponent.prototype.ngOnDestroy = function() { };

Wrapper_ChildComponent.prototype.check_name =function(currValue,
  throwOnChange, forceUpdate) {
  var self = this;
  // 判断值是否更新，jit_checkBinding2中直接使用looseIdentical(oldValue, newValue)
  // 进行全等比较(===)
  if ((forceUpdate || jit_checkBinding2(throwOnChange,self._expr_0,currValue))) {
    self._changed = true;
    self.context.name = currValue;
    // 创建name关联的SimpleChange对象
    self._changes['name'] = new jit_SimpleChange3(self._expr_0,currValue);
    self._expr_0 = currValue;
  }
};


Wrapper_ChildComponent.prototype.ngDoCheck = function(view,el,throwOnChange) {
  var self = this;
  var changed = self._changed;
  self._changed = false;
  if (!throwOnChange) { if (changed) {
    self.context.ngOnChanges(self._changes);
    jit_setBindingDebugInfoForChanges4(view.renderer,el,self._changes);
    self._changes = {};
  } }
  return changed;
};
 ...
return Wrapper_ChildComponent
})

我有话说

1.注册指令生命周期钩子时，一定要实现对应的接口么 ?

注册指令生命周期钩子时，实现对应的接口不是必须的，接口可以帮助我们在开发阶段尽早地发现错误，因为我们有可能在注册生命周期钩子的时候，写错了某个钩子的名称，在运行时可能不会抛出任何异常，但页面显示却不是预期的效果，因此建议读者还是遵守该开发规范。另外还要注意的一点是，TypeScript 中定义的接口，是不会编译生成 ES5 相关代码，它只用于编译阶段做校验。

未完待续

Angular 2 Directive Lifecycle

Angular 2 指令生命周期钩子的作用及调用顺序

Angular 2 指令生命周期钩子详解

Angular 2 LifecycleHooks 、SimpleChanges 等相关接口

Angular 2 View 详解

我有话说

阿宝哥

引用和评论

8.9W 播放量的 TS 动画版进阶教程合集来了！

使用 AI 在医疗影像分析中的应用探索

解决lodash由于依赖错误导致无法启动的问题

angular 新语法糖学习一

通过 AST 实现组件库替换升级

一个由于前端缺少 encodeURIComponent 引起的登录问题的分析和解决

Cocos-creator 实现简单触摸手势