Angular 2 组件构造函数与 OnInit

Question

如果我希望函数 x 在每次加载组件时都发生，无论是第一次，我导航到另一个站点并导航回来，还是第五次加载组件。

我应该把函数 x 放在什么地方？组件构造函数还是 OnInit?

Answer 1

第一个（构造函数）与class实例化有关，与Angular2无关。我的意思是构造函数可以用于任何 class。可以在里面放一些新创建的实例的初始化处理。

第二个对应Angular2组件的生命周期钩子：

ngOnChanges 当输入或输出绑定值改变时被调用
ngOnInit 在第一个 ngOnChanges

所以如果你的函数的初始化处理依赖于组件的绑定（例如用@Input定义的组件参数），你应该使用ngOnInit，否则构造函数就足够了...

Answer 2

constructor() 是一个打字稿功能，被称为 new SomeClass()。构造函数确保 class 层次结构中正确的字段初始化顺序。

ngOnInit 是一个 Angular2 生命周期方法，当 Angular 完成构建组件并在第一次评估绑定并更新输入后调用它。

另见

Answer 3

构造函数是打字稿的预定义默认方法class。 Angular 和 constructor 之间没有关系。通常我们使用 constructor 到 define/initialize 一些变量，但是当我们有与 Angular 的绑定相关的任务时，我们移动到 Angular 的 ngOnInit 生命周期钩子. ngOnInit 在构造函数调用之后立即调用。我们也可以在构造函数中做同样的工作，但最好使用 ngOnInit 来启动 Angular 的绑定。

为了使用 ngOnInit 我们必须从核心库中导入这个钩子：

import {Component, OnInit} from '@angular/core'

然后我们用导出的class实现这个接口（这不是强制实现这个接口，但通常我们会实现）。

同时使用两者的示例：

export class App implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}

有关详细信息，另请参阅

Angular 2 组件构造函数与 OnInit

Angular 2 Component Constructor Vs OnInit

constructor

ngoninit

angular