Angular 生命周期钩子，让你掌控每个关键时刻！

Posted 2021-04-26 Think体验设计

Angular 每个组件都存在一个生命周期，从创建、变更到销毁。Angular 提供组件生命周期钩子，把这些关键时刻暴露出来，赋予在这些关键结点和组件进行交互的能力，掌握生命周期，可以让我们更好的开发 Angular 应用。

 

 概述 

每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上 ng 前缀构成的。比如，OnInit 接口的钩子方法叫做 ngOnInit， Angular在创建组件后立刻调用它，如下图

（温馨提示：左右滑动可查看全部代码）

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'] 
})
export class AppComponent implements OnInit {
  title = 'app';

  ngOnInit() {
    console.log('组件初始化...');
  }
}

//控制台输出如下图：

（温馨提示：点击图片可查看大图）

 生命周期的执行顺序 

生命周期顺序简写

在 Angular 通过构造函数创建组件/指令时，它调用这些生命周期钩子方法的顺序是：

（1）ngOnChanges 在有输入属性的情况下才会调用，该方法接受当前和上一属性值的SimpleChanges 对象。如果有输入属性，会在 ngOnInit 之前调用。

（2）ngOnInit 在组件初始化的时候调用，只调用一次，在第一次调用ngOnChanges之后调用。

（3）ngDoCheck在组件定义的属性或方法变更时调用（用于脏值之检测，非常耗性能，因为会把所有的属性和方法都检测一遍），会在ngOnChanges()和ngOnInit()之后。

（4）ngAfterContentInit 在组件内容初始化之后调用，在第一次 ngDoCheck 之后调用，只调用一次。

（5）ngAfterContentChecked 在组件每次检查内容发生变更时调用。在 ngAfterContentInit和每次 ngDoCheck 之后调用。

（6） ngAfterViewInit 在组件相应的视图初始化之后调用，第一次 ngAfterContentChecked之后调用，只调用一次。

 （7）ngAfterViewChecked 在组件每次检查视图发生变更时调用。ngAfterViewInit 和每次ngAfterContentChecked 之后调用。

（8）ngOnDestroy 在组件销毁前调用，做一些清理工作，比如退订可观察对象和移除事件处理器，以免导致内存泄漏。

Angular 生命周期接口

按照生命周期执行的先后顺序，Angular生命周期接口如下表所示

（温馨提示：点击图片可查看大图）

生命周期测试

测试代码如下所示

// 未按照生命周期钩子函数执行顺序书写代码，控制台打印出来函数执行顺序并不是按照//代码书写顺序：

（温馨提示：左右滑动可查看全部代码）

import { Component, SimpleChanges, Input } from "@angular/core";
@Component({
  selector: "app-child",
  templateUrl: "./app.child.component.html",
  styleUrls: []
})
export class ChildComponent  {
  @Input() name: string;
  constructor() {
    console.log("constructor执行•••");
  }
  ngOnChanges(changes: SimpleChanges) {
    console.log("ngOnChages执行了•••");
  }
  ngOnInit() {
    console.log("ogOnInit执行了••••");
  }
  ngAfterContentChecked() {
    console.log("ngAfterContentChecked执行了•••");
  }
  ngAfterViewInit() {
    console.log("ngAfterViewInit执行了••••");
  }
  ngAfterViewChecked() {
    console.log("ngAfterViewChecked执行了••••");
  }
  ngOnDestroy() {
    console.log("ngOnDestroy执行了••••");
  }
   
  ngDoCheck() {
    console.log("ngDoCheck执行了••••");
  }
  ngAfterContentInit() {
    console.log("ngAfterContentInit执行了•••");
  }
}

（1）初始化加载过程中，未输入改变值时，控制台输出效果如下图：

（温馨提示：点击图片可查看大图）

（2）输入框输入改变值时，控制台输出效果如下图所示：

（温馨提示：点击图片可查看大图）

— END —

有什么想对作者说的吗？快来留言吧！

相关链接：

• 
  

THINK体验设计

微信ID：hw-Think

长按二维码关注有惊喜

点击“阅读原文”，进入华为云官网 !