周期函数
周期函数名 | 主要作用 |
---|---|
ngOnChanges | 当一个组件的传递一个输入props的时候会调用 |
ngOnInit | 发生在ngChanges之后,做一些数据初始化的东西,可进行接口请求 |
ngDoCheck | 用这个方法来检测那些被 Angular 忽略的更改,性能开销很大! |
ngAfterContentInit | 当界面的内容被改变之后调用 |
ngAfterContentChecked | 当界面的内容被改变之后进行check之后调用 |
ngAfterViewInit | 组件的子视图(自组件)被创建之后调用 |
ngAfterViewChecked | 组件的子视图(子组件)被检测之后调用 |
ngOnDestroy | 组件被销毁时调用 |
组件生命周期的接口实现
一般而言,就算我们不对组件的生命周期进行接口实现,在使用上也不会有太大的问题,但是从严格的TypeScript的角度而言,每当我们使用一个周期函数的时候,我们都应该对其进行接口实现。
import { Component } from '@angular/core';
@Component({
selector: "app-root",
template: "<div></div>"
})
export class AppComponent implements OnInit {
constructor(){}
ngOnInit() {
//数据初始化
}
}
ngOnInit和constructor
constructor这个函数,一般进行一些初始化操作,给一些默认值等信息。但时一般而言,我们不回在这个周期函数中涉及太多的的逻辑运算和操作。
ngOnInit也是进行数据初始化的,但是相对于constructor这个周期函数,它一般是进行数据请求的操作的。
ngDoCheck进行脏值检测
在组件定义的属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍),调用发生在ngOnChanges()和ngOnInit()之后。
关于AfterView和AfterContent
我觉得用这样的一句话很浅显的表示了他们的不同:
- AfterView 钩子所关心的是 ViewChildren,这些子组件的元素标签会出现在该组件的模板里面。
- AfterContent 钩子所关心的是 ContentChildren,这些子组件被 Angular 投影进该组件中。
ngOnDestory
一些清理逻辑必须在 Angular 销毁指令之前运行,把它们放在 ngOnDestroy() 中。
这是在该组件消失之前,可用来通知应用程序中其它部分的最后一个时间点。
这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。 取消那些对可观察对象和 DOM 事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 如果不这么做,就会有导致内存泄露的风险。