为啥不应该在Angular中组件的构造函数中进行数据初始化？

Posted 2023-03-13

技术标签:

【中文标题】为啥不应该在Angular中组件的构造函数中进行数据初始化？【英文标题】：Why data initialization should not be done in the constructor of the component in Angular?为什么不应该在Angular中组件的构造函数中进行数据初始化？ 【发布时间】：2019-04-05 09:14:15 【问题描述】：

我是 Angular 6 的新手。我需要通过 API 调用初始化所有下拉字段。很多开发者建议数据初始化的 api 调用应该在 ngOninit 内部完成，而不是通过构造函数来完成？谁能告诉我这背后的原因？

【问题讨论】：

【参考方案1】：

这是因为调用constructor 来初始化类而不是而不是组件。 constructor 在 ngOnInit 之前调用，此时 component 尚未创建，只有 component 类已被实例化，因此您的依赖项被引入，但您的初始化代码不会运行。

为了确保你的初始化代码运行，只需将它放在ngOnInit中，这是angular中组件的生命周期钩子方法，确保组件已成功创建。

【讨论】：

您好 Sarthak，感谢您的回复。另外，您能否向我解释一下有关 AfterViewInit()、AfterViewChecked()、AfterContentInit() 和 AfterContentChecked() 的信息。我对此有点困惑，因为我不确定何时使用它？请参考这个link，如果有帮助请告诉我。 @SarthakAggarwal，对于在应用程序的生命周期内其值不会改变的属性（例如，页脚中的静态信息）是否会有所不同？【参考方案2】：

constructor 类（或本例中的 TypeScript）上的方法是类本身的特性，而不是 Angular 特性。调用构造函数时，它超出了 Angular 的控制

在创建类的新实例时调用构造函数，但这并不意味着角完成完成了组件和绑定

import  Component, OnInit  from '@angular/core';

@Component()
class ExampleComponent implements OnInit 
  constructor() 

  // called on demand by Angular
  ngOnInit() 
    console.log('ngOnInit fired');
  


const instance = new ExampleComponent();

// Angular calls this when necessary
instance.ngOnInit();

请注意，javascript 引擎调用构造函数，而不是直接调用 Angular。这就是创建 ngOnInit（以及 AngularJS 中的 $onInit）生命周期挂钩的原因。

ngOnInit 纯粹是为了给我们一个信号，表明 Angular 已经完成了组件的初始化。

此阶段包括针对我们可能绑定到组件本身的属性进行更改检测的第一遍 - 例如使用 @Input() 装饰器。

因此，@Input() 属性在 ngOnInit 中可用，但在构造函数中是 undefined