像许多其他语言一样，可以在类级、构造函数或方法上初始化变量。这取决于开发人员来决定在他们的特定情况下什么是最好的。但下面是在做决定时的最佳实践清单。

类级变量

通常，您将在这里声明将在组件的其余部分中使用的所有变量。如果值不依赖于其他任何东西，可以初始化它们，或者如果它们不会改变，则使用const关键字创建常量。

export class TestClass{
    let varA: string = "hello";
}

构造函数

通常，最好的做法是在构造函数中不做任何事情，只将它用于将要被注入的类。大多数时候你的构造函数应该是这样的:

   constructor(private http: Http, private customService: CustomService) {}

这将自动创建类级变量，因此您将可以访问customService.myMethod()，而不必手动执行。

NgOnInit

NgOnit是Angular 2框架提供的一个生命周期钩子。你的组件必须实现OnInit才能使用它。这个生命周期钩子在构造函数被调用并初始化所有变量之后被调用。大部分初始化工作应该放在这里。你将确信Angular已经正确地初始化了你的组件，并且你可以开始在OnInit中执行任何你需要的逻辑，而不是在你的组件还没有正确加载完成的时候进行操作。

下面是一张详细说明调用顺序的图片:

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

TLDR

如果你正在使用Angular 2框架，并且需要与特定的生命周期事件交互，请使用框架提供的方法来避免问题。

构造函数是ES6的一部分，typescript使用ES6语法，现在也使用es7语法，所以你可以利用typescript将编译为es5/es4(根据你的定义)的高级功能来提供对旧浏览器的支持。

而ngOnInIt是angular的生命周期钩子。当你的组件被初始化时，它也被初始化。(把它的状态看作是新生的状态)

使用ngOnInIt比较构造函数是明智的，因为你有另一个生命周期钩子，如ngOnDestory(认为它是任何生命的死亡)。在这里，你可以取消订阅任何可观察对象，这有助于防止任何内存泄漏。

如果有任何问题，请随意评论这个答案。

构造函数是在构建组件(或其他类)时执行的函数。

ngOnInit是一个属于组件生命周期方法组的函数，它们在组件的不同时刻执行(这就是为什么命名为life-cycle)。以下是它们的列表:

构造函数将在任何生命周期函数之前执行。

第一个(构造函数)与类实例化有关，与Angular2无关。构造函数可以用在任何类上。您可以在其中放入一些新创建实例的初始化处理。

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

引用自angular官方网站:

当输入或输出绑定值发生变化时调用ngOnChanges 在第一个ngOnChanges之后调用ngOnInit

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

构造函数: ES6类(这里是TypeScript)的构造函数方法是类本身的特性，而不是Angular的特性。当调用构造函数时，它不在Angular的控制范围内，这意味着它不是一个合适的钩子来告诉你Angular何时完成了组件的初始化。JavaScript引擎调用构造函数，而不是直接调用Angular。这就是为什么创建了ngOnInit(和AngularJS中的$onInit)生命周期钩子。记住这一点，有一个使用构造函数的合适场景。这就是我们想要利用依赖注入的时候——本质上是为了将依赖“连接”到组件中。

由于构造函数是由JavaScript引擎初始化的，TypeScript允许我们告诉Angular，我们需要将哪些依赖关系映射到特定的属性上。

ngOnInit只是给我们一个信号，表明Angular已经完成了组件的初始化。

这个阶段包括针对我们可能绑定到组件本身的属性的Change Detection的第一步——比如使用@Input()装饰器。

因此，@Input()属性在ngOnInit中是可用的，但是在构造函数中是未定义的

构造函数和ngOnInit之间的主要区别是ngOnInit是生命周期钩子，在构造函数之后运行。组件插值模板和输入初始值在构造函数中不可用，但在ngOnInit中可用。

实际的区别在于ngOnInit如何影响代码的结构。大多数初始化代码可以移动到ngOnInit -只要这不会产生竞争条件。

构造函数反模式

大量的初始化代码使得构造函数方法难以扩展、读取和测试。

将初始化逻辑与类构造函数分离的一个常用方法是将其移动到另一个方法，如init:

class Some {
  constructor() {
    this.init();
  }

  init() {...}
}

ngOnInit可以在组件和指令中实现这个目的:

constructor(
  public foo: Foo,
  /* verbose list of dependencies */
) {
  // time-sensitive initialization code
  this.bar = foo.getBar();
}

ngOnInit() {
  // rest of initialization code
}

依赖注入

类构造函数在Angular中的主要作用是依赖注入。在TypeScript中，构造函数也用于DI注释。几乎所有依赖项都作为属性分配给类实例。

普通的组件/指令构造函数已经足够大了，因为它可以由于依赖而有多行签名，在构造函数体中放置不必要的初始化逻辑会导致反模式。

异步的初始化

异步初始化构造函数通常可以被认为是反模式的，并且具有嗅觉，因为类实例化在异步例程之前完成，这可能会产生竞争条件。如果不是这样，ngOnInit和其他生命周期钩子是更好的地方，特别是因为它们可以从异步语法中受益:

constructor(
  public foo: Foo,
  public errorHandler: ErrorHandler
) {}

async ngOnInit() {
  try {
    await this.foo.getBar();
    await this.foo.getBazThatDependsOnBar();
  } catch (err) {
    this.errorHandler.handleError(err);
  }
}

如果存在竞争条件(包括组件在初始化错误时不应该出现)，异步初始化例程应该在组件实例化之前发生，并被移动到父组件、路由器保护等。

单元测试

ngOnInit比构造函数更灵活，并为单元测试提供了一些好处，在这个回答中详细解释了这些好处。

考虑到ngOnInit不会在单元测试中的组件编译时自动调用，在ngOnInit中调用的方法可以在组件实例化后被监视或模拟。

在特殊情况下，ngOnInit可以完全stub，为其他组件单元(例如，一些模板逻辑)提供隔离。

继承

子类只能扩充构造函数，不能替换它们。

由于不能在super()之前引用this，这限制了初始化优先级。

考虑到Angular组件或指令使用ngOnInit进行时间不敏感的初始化逻辑，子类可以选择是否调用super.ngOnInit()，以及以下情况:

ngOnInit() {
  this.someMethod();
  super.ngOnInit();
}

仅使用构造函数是不可能实现的。