构造函数是ES6的一部分，typescript使用ES6语法，现在也使用es7语法，所以你可以利用typescript将编译为es5/es4(根据你的定义)的高级功能来提供对旧浏览器的支持。

而ngOnInIt是angular的生命周期钩子。当你的组件被初始化时，它也被初始化。(把它的状态看作是新生的状态)

使用ngOnInIt比较构造函数是明智的，因为你有另一个生命周期钩子，如ngOnDestory(认为它是任何生命的死亡)。在这里，你可以取消订阅任何可观察对象，这有助于防止任何内存泄漏。

如果有任何问题，请随意评论这个答案。

该构造函数在Angular“实例化/构造”组件时被调用。 ngOnInit方法是一个钩子，它表示组件生命周期的初始化部分。 一个好的做法是只在服务注入时使用它:

constructor(private 
    service1: Service1,
    service2: Service2
){};

即使有可能，你也不应该在里面做一些“工作”。 如果你想在组件“初始化”时启动一些动作，请使用ngOnInit:

ngOnInit(){
    service1.someWork();
};

此外，涉及来自父组件的输入属性的操作不能在构造函数中完成。 它们应该放在ngOnInit方法或其他钩子中。 与视图(DOM)相关的元素也是一样的，例如viewchild元素:

@Input itemFromParent: string;
@ViewChild('childView') childView;

constructor(){
    console.log(itemFromParent); // KO
    // childView is undefined here
};

ngOnInit(){
    console.log(itemFromParent); // OK
    // childView is undefined here, you can manipulate here
};

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

在构造函数上使用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();
    };


}

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

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

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

构造函数是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之间的主要区别是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();
}

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