例子演示所有钩子的调用顺序
1.子组件
2.父组件app.html
3.
效果:
结论:构造函数一定存在,其他方法根据实际实现。如果没实现这些钩子,发生这些事,组件就跳过去了。
ngOnChanges:在ngOnInit之前,当数据绑定输入属性的值发生变化时。
ngOnInit:在第一次ngOnChanges之后。用来初始化 (输入属性name在构造函数是空的,在第一次调用ngOnChanges被初始化,如果组件初始化依赖输入属性值,初始化逻辑写在ngOnInit中)
什么是生命周期钩子
简单点来说生命周期钩子就是Angular中一个组件从被创建当销毁期间的一些有意义的关键时刻.这些关键时刻在Angular中被Angular核心模块 @angular/core 暴露出来,赋予了我们在它们发生时采取行动的能力.
指令和组件的实例有一个生命周期:新建、更新和销毁。
每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的。比如,OnInit接口的钩子方法叫做ngOnInit。
生命周期顺序简写
在Angular通过构造函数创建组件/指令时,它调用这些生命周期钩子方法的顺序是:
ngOnChanges:在ngOnInit之前,当数据绑定输入属性的值发生变化时。
ngOnInit:在第一次ngOnChanges之后。用来初始化 (输入属性name在构造函数是空的,在第一次调用ngOnChanges被初始化,如果组件初始化依赖输入属性值,初始化逻辑写在ngOnInit中)
ngDoCheck:每次Angular变化检测时。
ngAfterContentInit:在外部内容放到组件内之后。
ngAfterContentChecked:在放到组件内的外部内容每次检查之后。
ngAfterViewInit:在初始化组件视图和子视图之后。
ngAfterViewChecked:在妹子组件视图和子视图检查之后。
ngOnDestroy:在Angular销毁组件/指令之前。
除此之外,一些组件还提供了自己的生命周期钩子。例如router有routerOnActivate