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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gaiery

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值