🎅🎅🎅提前祝Merry Xmas🎅🎅🎅

简介

Angular内部管理组件或指令的生命周期,给我们提供了一些接口(这些接口被称为生命周期钩子)来在允许开发者在这些事件触发时,执行相应的回调函数。

Angular一共提供了8个生命周期钩子接口,每个接口有一个唯一的前面加上‘ng’的方法,开发者可以根据实际情况实现其中的一个或者几个来对生命周期的各个阶段进行自定义处理。

图示

下图是Angular钩子方法执行顺序

hooks-in-sequence

钩子方法

首次调用发生在ngOnInit之前,并且,当且仅当组件输入数据变化时被调用,输入数据指的是通过@Input装饰器显示指定的那些变量。

创建组件之后立刻调用,经常会使用ngOnInit获取数据。

用于变化监测那些Angular忽略的更改,每次变化监测发生时被调用

在组件中使用’ng-content’自定义内容的情况下在第一次ngDoCheck执行后调用,只执行一次

Angular将外部内容嵌入到组件视图后,每次变化监测都会调用ngAfterContentChecked

Angular创建了组件的视图以及其子视图之后被调用

视图以及其子视图第一次初始化之后和每次变化监测时被调用

组件消失之前调用。根据官方文档描述,这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。 取消那些对可观察对象和DOM事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 如果不这么做,就会有导致内存泄露的风险。

注意事项

参考链接

中文官方文档

在线例子