生命周期钩子
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()这个生命周期钩子就会调用。