angular生命周期

原文

　　https://www.jianshu.com/p/a2f1d54097f8

大纲

　　一、angular生命周期是什么
　　二、生命周期钩子分类
　　三、Angular 2 指令生命周期钩子的做用及调用顺序
　　四、Angular 2 指令生命周期钩子详解
　　五、实例代码
　　六、参考网址

angular生命周期是什么

　　一、Angular每一个组件都存在一个生命周期，从建立，变动到销毁。Angular提供组件生命周期钩子，把这些关键时刻暴露出来，赋予在这些关键结点和组件进行交互的能力，掌握生命周期，可让咱们更好的开发Angular应用
　　二、每一个接口都有惟一的一个钩子方法，它们的名字是由接口名再加上ng前缀构成的，好比OnInit接口的钩子方法叫作ngOnInit.
　　三、没有指令或者组件会实现全部这些接口，而且有些钩子只对组件有意义。只有在指令/组件中定义过的那些钩子方法才会被Angular调用。

生命周期钩子分类

　　基于指令与组件的区别来分类:
　　　　一、指令与组件共有的钩子：
　　　　　　　　ngOnChanges
　　　　　　　　ngOnInit
　　　　　　　　ngDoCheck
　　　　　　　　ngOnDestroy
　　　　二、组件特有的钩子
　　　　　　　　ngAfterContentInit
　　　　　　　　ngAfterContentChecked
　　　　　　　　ngAfterViewInit
　　　　　　　　ngAfterViewChecked

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

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

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

　　一、构造函数

　　constructor是ES6中class中新增的属性，当class类实例化的时候调用constructor，来初始化类。Angular中的组件就是基于class类实现的，在Angular中，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'; 
  }
}

　　二、ngOnInit

 　　在第一次 ngOnChanges 执行以后调用，而且只被调用一次。它主要用于执行组件的其它初始化操做或获取组件输入的属性值。
在Angular第一次显示数据绑定和设置指令/组件的输入属性以后，初始化指令/组件。
　　使用ngOnInit()有两个缘由：
　　　　a：在构造函数以后立刻执行复杂的初始化逻辑
　　　　b：在Angular设置完输入属性以后，对该组件进行准备。

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值
    }
}

　　三、ngOnChanges

 　　当数据绑定输入属性的值发生变化的时候，Angular 将会主动调用 ngOnChanges 方法。它会得到一个 SimpleChanges 对象，包含绑定属性的新值和旧值，它主要用于监测组件输入属性的变化。当Angular（从新）设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的SimpleChanges对象。
当被绑定的输入属性的值发生变化时调用，首次调用必定会发生在ngOnInit()以前。

 

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);
    }
}

　　四、ngOnDestory

　　在指令被销毁前，将会调用 ngOnDestory 方法。它主要用于执行一些清理操做，好比：移除事件监听、清除定时器、退订 Observable 等。
　　当Angular每次销毁指令/组件以前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。
　　在Angular销毁指令/组件以前调用。
　　一些清理逻辑必须在Angular销毁指令以前运行，把它们放在ngOnDestroy()中。这是在该组件消失以前，可用来通知应用程序中其它部分的最后一个时间点。这里是用来释放那些不会被垃圾收集器自动回收的各种资源的地方。 取消那些对可观察对象和DOM事件的订阅。中止定时器。注销该指令曾注册到全局服务或应用级服务中的各类回调函数。 若是不这么作，就会有致使内存泄露的风险。

@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 方法。咱们可使用该方法，自定义咱们的检测逻辑。它也能够用来加速咱们变化检测的速度。
检测，并在发生Angular没法或不肯意本身检测的变化时做出反应。
在每一个Angular变动检测周期中调用，ngOnChanges()和ngOnInit()以后。

 　　六、ngAfterContentInit

　　在组件使用 ng-content 指令的状况下，Angular 会在将外部内容放到视图后用。它主要用于获取经过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。
当把内容投影进组件以后调用。第一次ngDoCheck()以后调用，只调用一次。

 　　七、ngAfterContentChecked

 　　在组件使用 ng-content 指令的状况下，Angular 会在检测到外部内容的绑定或者每次变化的时候调用。
每次完成被投影组件内容的变动检测以后调用。ngAfterContentInit()和每次ngDoCheck()以后调用

 　　八、ngAfterViewInit

　　在组件相应的视图初始化以后调用，它主要用于获取经过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
初始化完组件视图及其子视图以后调用。第一次ngAfterContentChecked()以后调用，只调用一次。

　　九、ngAfterViewChecked

　　组件每次检查视图时调用
　　每次作完组件视图和子视图的变动检测以后调用。
　　ngAfterViewInit()和每次ngAfterContentChecked()以后调用。

 　　十、AfterContent钩子和AfterView钩子的区别

 　　AfterContent钩子和AfterView类似。关键的不一样点是子组件的类型不一样。
　　　　一、AfterView钩子所关心的是ViewChildren，这些子组件的元素标签会出如今该组件的模板里面。
　　　　二、AfterContent钩子所关心的是ContentChildren，这些子组件被Angular投影进该组件中。

 实例代码

　　angular代码实例中的angular-life-cycle

参考网址

　　angular官网