我将添加一个重要的东西，在上面的解释中被跳过，并解释什么时候你必须使用ngOnInit。

如果你通过ViewChildren, ContentChildren或ElementRef对组件的DOM进行任何操作，你的原生元素在构造函数阶段将不可用。

然而，由于ngOnInit发生在组件被创建和检查(ngOnChanges)被调用之后，你可以在这一点上访问DOM。

export class App implements OnInit, AfterViewInit, AfterContentInit {
  @Input() myInput: string;
  @ViewChild() myTemplate: TemplateRef<any>;
  @ContentChild(ChildComponent) myComponent: ChildComponent; 

  constructor(private elementRef: ElementRef) {
     // this.elementRef.nativeElement is undefined here
     // this.myInput is undefined here
     // this.myTemplate is undefined here
     // this.myComponent is undefine here
  }

  ngOnInit() {
     // this.elementRef.nativeElement can be used from here on
     // value of this.myInput is passed from parent scope
     // this.myTemplate and this.myComponent are still undefined
  }
  ngAfterContentInit() {
     // this.myComponent now gets projected in and can be accessed
     // this.myTemplate is still undefined
  }

  ngAfterViewInit() {
     // this.myTemplate can be used now as well
  }
}

这里需要注意两点:

每当该类创建对象时，都会调用构造函数。 一旦组件创建，就调用ngOnInit。

两者都有不同的可用性。

构造函数

每个类都有构造函数，构造函数不是Angular特有的，而是从面向对象设计中派生出来的概念。构造函数创建组件类的实例。

OnInit

ngOnInit函数是Angular组件的生命周期方法之一。Angular组件中的生命周期方法(或钩子)允许你在组件生命的不同阶段运行一段代码。 与构造函数方法不同，ngOnInit方法来自Angular接口(OnInit)，组件需要实现该接口才能使用该方法。ngOnInit方法在组件创建后不久被调用。

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

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

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

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

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

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

类级变量

通常，您将在这里声明将在组件的其余部分中使用的所有变量。如果值不依赖于其他任何东西，可以初始化它们，或者如果它们不会改变，则使用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框架，并且需要与特定的生命周期事件交互，请使用框架提供的方法来避免问题。

首先，ngOnInit是Angular生命周期的一部分，而constructor是ES6 JavaScript类的一部分，所以主要的区别就是从这里开始的!

请看下面我创建的图表，它展示了Angular的生命周期。

在Angular2+中，我们使用构造函数为我们做DI(依赖注入)，而在Angular 1中，它是通过调用String方法并检查注入了哪个依赖。

正如你在上面的图表中看到的，ngOnInit是在构造函数准备好之后发生的，ngOnChnages和在组件为我们准备好之后被触发。所有的初始化都可以在这个阶段进行，一个简单的示例是注入一个服务并在init上初始化它。

好的，我还分享了一个示例代码给你看，看看我们如何在下面的代码中使用ngOnInit和构造函数:

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


@Component({
 selector: 'my-app',
 template: `<h1>App is running!</h1>
  <my-app-main [data]=data></<my-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
class ExampleComponent implements OnInit {
  constructor(private router: Router) {} //Dependency injection in the constructor
  
  // ngOnInit, get called after Component initialised! 
  ngOnInit() {
    console.log('Component initialised!');
  }
}