angular2生命周期函数

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mapbar_front/article/details/80305529

周期函数

周期函数名 主要作用
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 事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 如果不这么做,就会有导致内存泄露的风险。

展开阅读全文

没有更多推荐了,返回首页