10Angular生命周期

  • constructor

组件构造函数,因为是类自带的,所以永远第一个调用且只调用一次(在这里无法拿到组件传值的数据)

  • ngOnChanges

组件输入属性发生改变时调用,首次在constructor之前调用,会触发多次

ngOnChanges(changes: SimpleChanges): void {
  console.log("组件输入属性改变",changes);
}
//打印所有@Input中的属性,
//字典型对象,包括当前值、前一个值及是否第一次改变(key是属性名,value是SimpleChange)
  • ngOnInit

只在组件初始化时调用一次,可以安全地使用组件中的方法,在它之前的调用顺序是constructor => ngOnChanges =>ngOnInit。

官方建议在这个钩子中获取组件初始化的数据,而构造函数中只适合写简单的逻辑,比如初始化局部变量。

区别于接口OnInit,接口是可选的,也就是说只要有类似ngOnInit这样的方法存在,生命周期的钩子函数还是正常执行

但是建议实现接口,好处一是不会由于误删某个钩子函数,另一个是对组建涉及到的生命周期一目了然。

  • ngDoCheck脏值检测

执行多次数,通常和ngOnchange不会同时出现,是angular框架帮助用户做出的检测,而ngOnChange是用户更关心的

  • ngAfterContentInit

组件内容初始化后调用

  • ngAfterContentChecked

组件内容每次检查后调用

  • AfterViewInit

在组件视图初始化后调用,在这里安全地使用@ViewChild引用的元素

  • ngAfterViewChecked

在组件视图每次检查后调用,通常是 ngDoCheck => ngAfterContentChecked => ngAfterViewChecked 这样的顺序。

  • ngOnDestory
  //清理定时器
  ngOnDestory(): void {
    clearInterval(this.intervalId)
  }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概述 Angular2+(后面就直接用Angular代替了)中的每个组件都存在一个生命周期,从创建,变更到销毁。A...
    谦啸阅读 5,212评论 0 2
  • Ionic4中的生命周期函数和angualr7基本是一样的,下面我们看看Ionic4中的生命周期函数,以及生命周期...
    YuJingZhou阅读 6,878评论 0 0
  • 生命周期函数 通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。 当 Angular 使用构造函...
    小K强阅读 1,661评论 0 0
  • 生命周期 1、Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把...
    nzjcnjzx阅读 9,917评论 0 0
  • 组件的生命周期 指令和组件的实例有一个生命周期分别是:新建、更新和销毁。每个接口都有唯一的一个钩子方法,它们的名字...
    LeiGEGE阅读 4,633评论 0 0

友情链接更多精彩内容