构造函数和 ngOnInit 的区别

Question

Angular 默认提供生命周期钩子 ngOnInit 。

如果我们已经有 ngOnInit ，为什么还要使用 constructor ？

原文由 Haseena P A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Constructor 是类的默认方法，在类被实例化时执行，并确保类及其子类中字段的正确初始化。 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 进行所有初始化/声明，并避免在构造函数中工作。构造函数应该只用于初始化类成员，而不应该做实际的“工作”。

所以你应该使用 constructor() 来设置依赖注入，仅此而已。 ngOnInit() 是“开始”的更好地方——它是解决组件绑定的地方/时间。

有关更多信息，请参阅此处：

• https://angular.io/api/core/OnInit

• Angular 组件构造函数与 OnInit

重要的是要注意 @Input 值在构造函数中不可访问（感谢@tim在评论中的建议）

原文由 Pardeep Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Constructor 是Typescript类提供的默认方法，专门用于初始化类成员，一般用于 依赖注入 服务， 如上面的示例代码，或者定时器初始化，socket连接初始化

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;
    })
  }

}

原文由 Rebai Ahmed 发布，翻译遵循 CC BY-SA 4.0 许可协议