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

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

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

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

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

构造函数是类的默认方法，在类实例化时执行，并确保类及其子类中的字段正确初始化。Angular，或者更好的依赖注入器(DI)，会分析构造函数的参数，当它通过调用new MyClass()创建一个新实例时，它会尝试找到与构造函数参数类型匹配的提供程序，解析它们并将它们传递给构造函数

new MyClass(someArg);

ngOnInit是Angular调用的一个生命周期钩子，用来表示Angular已经创建完成了组件。

我们必须像这样导入OnInit才能使用它(实际上实现OnInit不是强制性的，但被认为是好做法):

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

然后使用OnInit方法，我们必须像这样实现类:

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

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

在初始化指令的数据绑定属性后，实现此接口来执行自定义初始化逻辑。 ngOnInit在指令的数据绑定属性第一次被检查之后被调用， 在它的子代被检查之前。 它只在指令实例化时被调用一次。

大多数情况下，我们使用ngOnInit进行所有的初始化/声明，避免在构造函数中工作。构造函数应该只用于初始化类成员，而不应该做实际的“工作”。

因此，您应该使用构造函数()来设置依赖注入，而不是其他什么。ngOnInit()是更好的“开始”的地方——它是解析组件绑定的地方。

更多信息请参考这里:

https://angular.io/api/core/OnInit Angular组件构造函数Vs OnInit

需要注意的是，@Input值在构造函数中是不可访问的(感谢@tim在注释中提出的建议)

为了测试这一点，我从NativeScript教程中借鉴编写了以下代码:

user.ts

export class User {
    email: string;
    password: string;
    lastLogin: Date;

    constructor(msg:string) {        
        this.email = "";
        this.password = "";
        this.lastLogin = new Date();
        console.log("*** User class constructor " + msg + " ***");
    }

    Login() {
    }
}

login.component.ts

import {Component} from "@angular/core";
import {User} from "./../../shared/user/user"

@Component({
  selector: "login-component",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent {

  user: User = new User("property");  // ONE
  isLoggingIn:boolean;

  constructor() {    
    this.user = new User("constructor");   // TWO
    console.log("*** Login Component Constructor ***");
  }

  ngOnInit() {
    this.user = new User("ngOnInit");   // THREE
    this.user.Login();
    this.isLoggingIn = true;
    console.log("*** Login Component ngOnInit ***");
  }

  submit() {
    alert("You’re using: " + this.user.email + " " + this.user.lastLogin);
  }

  toggleDisplay() {
    this.isLoggingIn = !this.isLoggingIn;
  }

}

控制台输出

JS: *** User class constructor property ***  
JS: *** User class constructor constructor ***  
JS: *** Login Component Constructor ***  
JS: *** User class constructor ngOnInit ***  
JS: *** Login Component ngOnInit ***  

构造函数是JavaScript中的一个方法，在es6中被认为是类的一个特性。当类被实例化时，无论是否在Angular框架中使用，它都会立即运行构造函数。所以它是由JavaScript引擎调用的，Angular对此没有控制。

import {Component} from '@angular/core';
@Component({})
class CONSTRUCTORTEST {

//This is called by Javascript not the Angular.
     constructor(){
        console.log("view constructor initialised");
     }
}

"ConstructorTest"类在下面实例化;因此它在内部调用 所有这些都是通过JavaScript(es6)实现的，而不是Angular)。

new CONSTRUCTORTEST();

这就是为什么Angular中有ngOnInit生命周期钩子。ngOnInit在Angular完成组件初始化后才会呈现。

import {Component} from '@angular/core';
@Component({})
class NGONINITTEST implements onInit{
   constructor(){}
   //ngOnInit calls by Angular
   ngOnInit(){
     console.log("Testing ngOnInit");
   }
}

首先，我们实例化如下所示的类，它发生在构造函数方法的立即运行中。

let instance = new NGONINITTEST();

Angular会在必要时调用ngOnInit，如下所示:

instance.ngOnInit();

但是你可能会问为什么我们在Angular中使用构造函数?

答案是依赖注入。正如前面提到的，当类被实例化时(在Angular调用ngOnInit之前)，JavaScript引擎会立即调用构造函数，因此typescript帮助我们获得在构造函数中定义的依赖类型，并最终告诉Angular我们想在特定组件中使用什么类型的依赖。

我认为最好的例子是使用服务。假设我想在我的组件“激活”时从我的服务器获取数据。假设我还想在从服务器获取数据后对数据做一些额外的处理，也许我得到了一个错误，想要以不同的方式记录它。

在构造函数上使用ngOnInit真的很容易，它还限制了我需要添加到应用程序中的回调层的数量。

例如:

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
    };


}

对于构造函数，我可以只调用我的_userService并填充我的user_list，但也许我想对它做一些额外的事情。比如确保所有内容都是大写的，我不完全确定我的数据是如何通过的。

这让使用ngOnInit更容易。

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
        this.user_list.toUpperCase();
    };


}

它使它更容易看到，所以当我初始化时，我只是在组件中调用我的函数而不是在其他地方寻找它。实际上，它只是另一个工具，可以让你在将来更容易阅读和使用。此外，我发现将函数调用放在构造函数中是非常糟糕的实践!

构造函数和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();
}

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