构造函数

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

OnInit

ngOnInit函数是Angular组件的生命周期方法之一。Angular组件中的生命周期方法(或钩子)允许你在组件生命的不同阶段运行一段代码。 与构造函数方法不同，ngOnInit方法来自Angular接口(OnInit)，组件需要实现该接口才能使用该方法。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();
}

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

构造函数是Typescript类提供的默认方法，专门用于初始化类成员，通常用于依赖注入服务，如上面的示例代码，或定时器初始化，套接字连接初始化

export class AppComponent {
  title = 'angular-fork-join';
  constructor(private http: HttpClient) {}

ngOnInit:是Angular提供的一个生命周期钩子，在组件初始化时调用，专门用于业务逻辑、数据初始化、API调用等。，演示API调用的示例代码:

export class HomeComponent implements OnInit {

  products = [];

  constructor(private dataService: DataService) { }

  ngOnInit() {

    this.dataService.sendGetRequest().subscribe((data: any[])=>{
      console.log(data);
      this.products = data;
    })  
  }

} 

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

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

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

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

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

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

这里需要注意两点:

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

两者都有不同的可用性。