angular的所有生命周期钩子
每个组件都有一个被 angular 管理的生命周期,angular 通过生命周期钩子把组件的重要时刻暴露出来,让我们在它们发生时采取某些行为。除了和视图/内容有关的生命周期钩子,指令有和组件一样的生命周期:创建->更新->销毁;如图:
通过实现一个或多个 Angular core 库里定义的生命周期钩子接口,开发者可以介入该生命周期中的这些关键时刻。例如:
export class PeekABoo implements OnInit {
constructor(private logger: LoggerService) { }
// implement OnInit's `ngOnInit` method
ngOnInit() { this.logIt(`OnInit`); }
logIt(msg: string) {
this.logger.log(`#${nextId++} ${msg}`);
}
}
组件在创建之后,立刻调用 OnInit 接口的钩子方法:ngOnInit() ;
常见生命周期钩子
ngOnInit()钩子
使用 ngOnInit() 有下面两个原因:
-
在构造函数之后马上执行复杂的初始化逻辑;
-
在 angular 设置完输入属性后,马上对该组件进行准备;
它是获取初始化数据的好时期,不过要注意,是在 constructor 之后,因为在这之前,绑定的输入属性还没有值,这时候没有初始化,当OnInit 执行的时候,那些属性都已经被正确的赋值过了。
ngOnChange()钩子
当检测到组件的输入属性即 Input 进来的属性发生了变化的时候,就会调用它的 ngOnChange() 钩子;
ngOnChanges(changes: SimpleChanges) {
for (let propName in changes) {
let chng = changes[propName];
let cur = JSON.stringify(chng.currentValue);
let prev = JSON.stringify(chng.previousValue);
this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
}
}
ngOnChange()
方法获取了一个对象,它把每个发生变化的属性名都映射到了一个 SimpleChange 对象, 该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代,并记录它们。
ngOnDestroy() 钩子
一些清理逻辑必须放在指令销毁之前进行,这时可以把它放进ngOnDestroy()中.这里可以 里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方/取消那些对可观察对象和 DOM 事件的订阅/停止定时器/注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 可以避免内存泄露;