Angular学习笔记30：生命周期钩子

生命周期钩子

Angular 提供了生命周期钩子，并把组件的关键生命时刻（初始化，发生变化，销毁时等）暴露出来，让开发者通过这些关键的生命周期时刻，更好的作出更好的逻辑处理。

常见的生命周期钩子

ngOnInit()

ngOnInit()这个生命周期钩子是最常见的一个生命周期钩子，在使用angular-cli创建一个新的组件的时候，angular-cli会自动的使用ngOnInit这个生命周期钩子。

创建一个新的组件：

ng g c testLifecycle

然后打开testLifecycle组件的类文件就会发现：

这个生命周期钩子：就是在组件被初始化时候就会调用这个钩子。它是在生命周期钩子：ngOnChanges() 完成第一次之后调用。

在这个组件使用过程中，ngOnInit()这个生命周期钩子只被调用一次。

ngOnChange()

使用ngOnChange()这个生命周期钩子，必须要先使TestLifecycleComponent实现：OnChanges，然后使用ngOnChange()；即：

当 Angular（重新）设置数据绑定输入属性时就会调用这个生命周期钩子。

这个方法接受当前和上一属性值的 SimpleChanges 对象

在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。即：

在TestLifecycleComponent中绑定一个输入属性的值：

然后在AppComponent中以子组件的形式使用：

然后在控制台就可以看到：

就可以得到这个绑定的输入属性的值，每次变化的值，还有其他相关信息。每当这个绑定的输入属性的值发生变化时，ngOnChange()这个生命周期钩子就会调用。