Angular 2组件构造函数与OnInit

Question

如果我希望每次加载组件时都会发生函数x,无论是第一次加载,我都会导航到另一个站点并导航回来,或者是组件第五次加载.

我应该把函数x放入什么？组件构造函数还是OnInit？

Answer 1

构造函数是typescript类的预定义默认方法.Angular和constructor.之间没有任何关系.通常我们constructor用来定义/初始化一些变量,但是当我们有与Angular的绑定相关的任务时,我们转移到Angular的ngOnInit生命周期钩子.ngOnInit在构造函数调用之后调用.我们也可以在构造函数中做同样的工作,但最好用它ngOnInit来启动Angular的绑定.

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

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

然后我们用导出的类实现这个接口(这不是强制实现这个接口,但通常我们这样做).

使用两者的示例:

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

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

有关更多详细信息,请参阅构造函数和ngOnInit之间的区别

Answer 2

第一个(构造函数)与类实例化有关,与Angular2无关.我的意思是构造函数可以在任何类上使用.您可以为新创建的实例添加一些初始化处理.

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

• ngOnChanges 在输入或输出绑定值更改时调用
• ngOnInit 在第一个之后调用 ngOnChanges

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

Answer 3

constructor()是一个打字稿功能,并被要求new SomeClass().构造函数确保类层次结构中正确的字段初始化顺序.

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

另请参见构造函数和ngOnInit之间的区别