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

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

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

为了测试这一点，我从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 ***  

首先，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!');
  }
}

这里需要注意两点:

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

两者都有不同的可用性。

构造函数在类实例化时执行。它与棱角无关。这是Javascript的特性，Angular无法控制它

ngOnInit是Angular特有的，当Angular用所有输入属性初始化组件时，它会被调用

@Input属性在ngOnInit生命周期钩子下可用。这将帮助你做一些初始化的事情，比如从后端服务器获取数据等显示在视图中

@Input属性在构造函数中显示为未定义

构造函数是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我们想在特定组件中使用什么类型的依赖。