本文共 2465 字，大约阅读时间需要 8 分钟。

一、说明

Angular每个组件都存在一个生命周期，从创建，变更到销毁。Angular提供组件生命周期钩子，把这些关键时刻暴露出来，赋予在这些关键结点和组件进行交互的能力。

二、angular中总共有8个生命周期钩子函数下面统一介绍

三、查看调用顺序

//在app.component.html代码
   

//在app.component.ts代码import { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {
     name:any = "";}

//在life.component.html代码
    我是life组件
我是从父组件输入的内容:{
   {
   item}}

//在life.component.ts代码import { Component, OnInit,Input,OnChanges,SimpleChanges,DoCheck,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy} from '@angular/core';@Component({  selector: 'app-life',  templateUrl: './life.component.html',  styleUrls: ['./life.component.css']})export class LifeComponent implements OnInit,OnChanges,DoCheck,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy {
     @Input() item:any = "";  index:number = 0;  log(arg):void{      console.log(`#${this.index}我是${arg}内容`);      this.index ++;  }  constructor() {      this.log("constructor");  }  ngOnInit() {    this.log("ngOnInit");  }  ngOnChanges(changes:SimpleChanges){    this.log("ngOnChanges");  }  ngDoCheck(){    this.log("ngDoCheck");  }  ngAfterContentInit(){    this.log("ngAfterContentInit");  }  ngAfterContentChecked(){    this.log("ngAfterContentChecked");  }  ngAfterViewInit(){    this.log("ngAfterViewInit");  }  ngAfterViewChecked(){    this.log("ngAfterViewChecked");  }  ngOnDestroy(){    this.log("ngOnDestroy");  }}

• 1、项目初始化后运行效果如下:

  

• 2、当用户在输入框输入的时候，传递数据到子组件中运行效果如下:

  

• 3、当鼠标离开输入框的时候谷歌控制台的效果
  
• 4、angular中变化检测的钩子函数有ngOnChanges、ngDocheck、ngAfterContentChecked、ngAfterViewChecked

四、ngOnChanges的介绍

• 1、在父组件初始化
• 2、修改子组件
  在上面两种情况下会触发ngOnChanges钩子函数，把上面的代码修改下直接打印输出值

ngOnChanges(changes:SimpleChanges){    console.log(JSON.stringify(changes,null,2));  }

运行输出结果，会展示一个对象，显示当前值与上一次的值