例子演示所有钩子的调用顺序
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
网友评论