NG4——组件生命周期钩子

最新推荐文章于 2023-11-02 15:56:36 发布

gaiery

最新推荐文章于 2023-11-02 15:56:36 发布

阅读量304

点赞数

分类专栏： NG4 前端

本文链接：https://blog.csdn.net/gaiery/article/details/79976786

版权

前端同时被 2 个专栏收录

30 篇文章 2 订阅

订阅专栏

NG4

9 篇文章 0 订阅

订阅专栏

本文深入解析Angular指令的生命周期，涵盖从创建、应用到销毁的全过程。详细介绍了Angular提供的与指令生命周期相关的钩子，如ngOnChanges、ngOnInit等，以及它们的调用顺序和应用场景，帮助开发者更好地理解和运用Angular框架。

摘要由CSDN通过智能技术生成

Angular 指令的生命周期，它是用来记录指令从创建、应用及销毁的过程。Angular 提供了一系列与指令生命周期相关的钩子，便于我们监控指令生命周期的变化，并执行相关的操作。Angular 中所有的钩子如下图所示：
这里写图片描述
#分类

##指令与组件共有的钩子
ngOnChanges
ngOnInit
ngDoCheck
ngOnDestroy
##组件特有的钩子
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
#调用顺序
ngOnChanges - 当数据绑定输入属性的值发生变化时调用
ngOnInit - 在第一次 ngOnChanges 后调用
ngDoCheck - 自定义的方法，用于检测和处理值的改变
ngAfterContentInit - 在组件内容初始化之后调用
ngAfterContentChecked - 组件每次检查内容时调用
ngAfterViewInit - 组件相应的视图初始化之后调用
ngAfterViewChecked - 组件每次检查视图时调用
ngOnDestroy - 指令销毁前调用
#实现
要实现生命周期钩子，只需实现对应的接口即可，如实现ngOnChanges钩子只需实现OnChanges接口即可：

export class xxxComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewChecked, AfterViewInit, OnDestroy { 
    // coding... 
}

##ngOnChanges
@input属性(输入属性)发生变化时，会调用。非此属性，不会调用。
当输入属性为对象时，当对象的属性值发生变化时，不会调用，当对象的引用变化时会触发。
先于ngOnInit调用。

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

如果输入属性发生变化，输出结果如下：
这里写图片描述

##DoCheck
ngDoCheck() 是Angular中的变更检测机制.它由 zone.js 来实现的.其行为是只要你的Angular中的某个组件发生异步事件.就会检查整个组件树,以保证组件属性的变化或页面的变化是同步的.所以 ngDoCheck() 的触发相当频繁的.并且是我们无法预料到的.也许我们在页面上的一个无意识操作,就会触发几个甚至几十个的 ngDoCheck() 生命周期钩子.

  oldUserName:string;
  changeDetected:boolean = false;
  noChangeCount:number = 0;
  ngDoCheck(): void {
    if(this.users.name!==this.oldUserName){
      this.changeDetected=true;
      console.log("doCheck:user.name从"+this.oldUserName+"变为"+this.users.name);
      this.oldUserName=this.users.name;
    }
    if(this.changeDetected){
      this.noChangeCount=0;
    }else{
      this.noChangeCount=this.noChangeCount+1;
      console.log("doCheck:user.name没有变化时，docheck已经被调用"+this.noChangeCount+"次");
    }
    this.changeDetected=false;
  }

控制台输出结果如下：
这里写图片描述
#view钩子
###AfterViewInit和AfterViewChecked
定义：整个视图组装完毕时调用
注意：
AfterViewInit在AfterViewChecked之前调用
子组件的View钩子（包括AfterViewInit和AfterViewChecked）调用完毕，父组件的View钩子才调用
View钩子禁止改变视图中绑定的数据值，需放入另一个js周期中，如setTimeout