angular生命周期

生命周期通俗的讲就是组件的创建、组件更新、组件销毁的时候会触发的一系列的方法，当angular使用构造函数新建一个组件或指令后，就会按下面的顺序在特定的时刻调用这些生命周期钩子方法，下面我们一起来看看吧。

1. ngOnChanges

时机：当被绑定的输入属性（@input）的值发生变化时调用，首次调用一定会发生在 ngOnInit之前；该回调方法会收到一个包含当前值和原值的changes对象。在有输入属性的情况下才会调用，该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性，会在ngOnInit之前调用。

接口：OnChanges；

适用范围： 指令和组件种；

2.ngOnInit

时机：在第一轮 ngOnChanges 完成之后调用。 ( 也就是说当每个输入属性（@input）的值都触发了一次ngOnChanges 之后才会调用ngOnInit ，此时所有的输入属性都已经有了正确的初始绑定值 )；在组件初始化的时候调用，只调用一次，在第一次调用ngOnChanges之后调用

接口： OnInit

适用范围： 指令和组件种

3.ngDoCheck 

时机：在每个 Angular 变更检测周期中调用;用来检测所有变化（无论是Angular本身能检测还是无法检测的），并作出相应行动。在每次执行“变更检测”时被调用。在组件定义的属性或方法变更时调用(用于脏值之检测，非常耗性能，因为会把所有的属性和方法都检测一遍）

接口： DoCheck;

适用范围： 指令和组件中

4.ngAfterContentInit 

时机：当把内容投影进组件之后调用；在组件内容初始化之后调用，在第一次ngDoCheck之后调用，只调用一次

接口：AfterContentInit 

适用范围： 组件中

5.ngAfterContentChecked

时机：每次完成被投影组件内容的变更检测之后调用；在组件每次检查内容放生变更时调用。在ngAfterContentInit和每次ngDoCheck之后调用

接口：AfterContentChecked

适用范围：组件中

6.ngAfterViewInit

时机：初始化完组件视图及其子视图之后调用；在组件相应的视图初始化之后调用，第一次ngAfterContentChecked之后调用，只调用一次

接口：AfterViewInit

适用范围：组件中

7.ngAfterViewChecked

时机：每次做完组件视图和子视图的变更检测之后调用；在组件每次检查视图发生变更时调用。ngAfterViewInit和每次ngAfterContentChecked之后调用。

接口：AfterViewChecked；

适用范围：组件中

8.ngOnDestroy

时机：当 Angular 每次销毁指令 / 组件之前调用；在Angular销毁指令或组件之前做一些清理工作，比如退订可观察对象和移除事件处理器，以免导致内存泄漏。

接口：OnDestroy

适用范围：指令和组件中

代码演示案例

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

@Component({
  selector: 'app-life-cycle',
  templateUrl: './life-cycle.component.html',
  styleUrls: ['./life-cycle.component.scss']
})
export class LifeCycleComponent implements OnInit {

  constructor() { }


  ngOnChanges() {
    console.log("ngOnChanges--当被绑定的输入属性（@input）的值发生变化时调用== 1")
  }
  ngOnInit() {
    console.log("ngOnInit--在第一轮 ngOnChanges 完成之后调用 == 2")
  }
  ngDoCheck () {
    console.log("ngDoCheck--在每个 Angular 变更检测周期中调用 == 3")
  }
  ngAfterContentInit  () {
    console.log("ngAfterContentInit--当把内容投影进组件之后调用 == 4")
  }
  ngAfterContentChecked () {
    console.log("ngAfterContentChecked--每次完成被投影组件内容的变更检测之后调用 == 5")
  }
  ngAfterViewInit () {
    console.log("ngAfterViewInit--初始化完组件视图及其子视图之后调用 == 6")
  }
  ngAfterViewChecked () {
    console.log("ngAfterViewChecked--每次做完组件视图和子视图的变更检测之后调用 == 7")
  }
  ngOnDestroy () {
    console.log("ngOnDestroy--当 Angular 每次销毁指令 / 组件之前调用 == 8")
  }

}

代码执行的顺序

ngOnInit--在第一轮 ngOnChanges 完成之后调用 == 2

ngDoCheck--在每个 Angular 变更检测周期中调用 == 3

ngAfterContentInit--当把内容投影进组件之后调用 == 4

ngAfterContentChecked--每次完成被投影组件内容的变更检测之后调用 == 5

ngAfterViewInit--初始化完组件视图及其子视图之后调用 == 6

ngAfterViewChecked--每次做完组件视图和子视图的变更检测之后调用 == 7

ngDoCheck--在每个 Angular 变更检测周期中调用 == 3

ngAfterContentChecked--每次完成被投影组件内容的变更检测之后调用 == 5

ngAfterViewChecked--每次做完组件视图和子视图的变更检测之后调用 == 7