4.组件生命周期钩子概述

例子演示所有钩子的调用顺序

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