《Angular中构造函数和ngOnInit的本质区别》一文从多个角度探讨了其中的区别。这个答案提供了与组件初始化过程相关的最重要的差异解释，也显示了使用上的差异。

Angular的引导过程包括两个主要阶段:

构造组件树 运行变更检测

当Angular构造组件树时，会调用组件的构造函数。所有生命周期钩子都作为运行变更检测的一部分被调用。

当Angular构建组件树时，根模块注入器已经配置好了，所以你可以注入任何全局依赖项。另外，当Angular实例化一个子组件类时，父组件的注入器也已经设置好了，这样你就可以注入父组件上定义的提供商，包括父组件本身。组件构造函数是唯一在注入器上下文中被调用的方法，所以如果你需要任何依赖项，只有从那里才能获得这些依赖项。

当Angular开始更改检测时，组件树就被构造了，树中所有组件的构造函数都被调用了。每个组件的模板节点也被添加到DOM中。@Input通信机制是在更改检测期间处理的，因此您不能期望构造函数中有可用的属性。它将在ngOnInit之后可用。

让我们看一个简单的例子。假设你有以下模板:

<my-app>
   <child-comp [i]='prop'>

所以Angular开始引导应用程序。正如我所说，它首先为每个组件创建类。它调用MyAppComponent构造函数。它还创建了一个DOM节点，它是my-app组件的宿主元素。然后它继续为child-comp创建一个宿主元素并调用ChildComponent构造函数。在这个阶段，它并不真正关心i输入绑定和任何生命周期钩子。所以当这个过程结束时，Angular就会得到如下的组件视图树:

MyAppView
  - MyApp component instance
  - my-app host element data
       ChildCompnentView
         - ChildComponent component instance
         - child-comp host element data  

然后才运行更改检测和更新my-app的绑定，并在MyAppComponent类上调用ngOnInit。然后它继续更新child-comp的绑定，并在ChildComponent类上调用ngOnInit。

你可以在构造函数或ngOnInit中进行初始化逻辑，这取决于你需要什么。例如，本文介绍了如何在@ViewChild查询被求值之前获取ViewContainerRef，这篇文章展示了可以要求在构造函数中执行什么类型的初始化逻辑。

这里有一些文章可以帮助你更好地理解这个话题:

关于Angular中的变更检测，你需要知道的一切 Angular的$digest在Angular的新版本中重生了 属性绑定的机制会在Angular中更新

上面的答案并没有真正回答最初问题的这一方面:什么是生命周期钩子?我花了一段时间才明白这意味着什么，直到我这样想。

1)假设你的组件是一个人。人类的生命包括许多阶段，然后我们就会死去。

2)我们的人类组件可以有以下生命周期脚本:出生，婴儿，小学，青年，中年成人，老年人，死亡，处理。

3)假设你想有一个功能来创造孩子。为了避免这个问题变得复杂，并且相当滑稽，您希望您的函数只在人类组件生命的Young Adult阶段被调用。所以你开发了一个组件，它只在父母组件处于年轻成人阶段时才活跃。钩子通过发出生命阶段的信号并让组件对其进行操作来帮助您做到这一点。

有趣的东西。如果你让你的想象力去实际编码这样的东西，它会变得复杂而有趣。

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

Constructor()用于进行依赖注入。

ngOnInit()， ngOnChanges()和ngOnDestroy()等都是生命周期方法。ngOnChanges()将是第一个被调用的，在ngOnInit()之前，当绑定属性的值发生变化时，如果没有变化，它将不会被调用。ngOnDestroy()在移除组件时被调用。要使用它，OnDestroy需要由类实现。

构造函数

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

OnInit

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

在Angular生命周期中

1) Angular注入器检测构造函数参数和实例化类。

2)下一个角调用生命周期

Angular生命周期钩子

调用指令参数绑定。

开始角渲染…

调用具有角生命周期状态的其他方法。