Angular 依赖注入和数据初始化

Posted 2023-03-13

【中文标题】Angular 依赖注入和数据初始化

【英文标题】：Angular dependency injection and data initialization

【发布时间】：2021-05-15 12:36:02

【问题描述】：

我有一个概念上的疑问，为什么我们使用构造函数将我们的服务注入组件和 ngOnInit() 生命周期挂钩来初始化所有值。在我读过的所有文章中，我了解到在 ngOnInit() 中初始化值是一种很好的做法，因为此时所有依赖项都可用。在实践中，我发现在构造函数中初始化除此之外也可以正常工作。

关于在构造函数中注入服务，我遇到了这些行

当 Angular 构建组件树时，根模块注入器已经配置好，因此您可以注入任何全局依赖项。此外，当 Angular 实例化一个子组件类时，父组件的注入器也已经设置好，因此您可以注入在父组件上定义的提供程序，包括父组件本身。组件构造函数是在注入器上下文中调用的唯一方法，因此如果您需要任何依赖项，这是获取这些依赖项的唯一位置。

但是，我无法判断为什么它是一个好地方。如果有人能帮助我理解这个核心用法，那将是一个很大的帮助。

【问题讨论】：

F.ex.如果以后要扩展一个类，子类可以调用super()调用基类构造函数传递依赖

好的，为什么组件构造函数是我们声明依赖的唯一地方？

我不太有信心详细说明 ES6 是如何工作的，但想象一下简单的例子 - 你有一个类 class Car name; constructor(brand) this.brand = brand 当你初始化这个类时你调用 - new Car('Porche')。如果您要在其他地方初始化依赖项，这将不起作用

好的，明白你的意思。这可能是一个原因。

请记住，在构造函数中将依赖项定义为带有 public 或 private 关键字的参数是一种打字稿快捷方式，如本文所述：dev.to/satansdeer/typescript-constructor-shorthand-3ibd - Angular DI 将此用作习惯用法。

【参考方案1】：

在组件构造函数中，您将注入所有依赖项，因此您可以在那里安全地使用您的服务或其他令牌。

关于在构造函数或 ngOnInit() 中初始化订阅存在长期争论，但大多数情况下这只是品味或风格的问题。

您唯一需要考虑的是，在构造函数中您没有任何可用的@Input 值，它们将在 ngOnInit() 中。

如果您扩展您的组件，只需确保调用 super() 或 super.ngOnInit()。

尝试始终利用 Angular DI 而不是手动创建服务或提供依赖项以避免陷阱。

查看文档： https://angular.io/guide/dependency-injection https://angular.io/guide/lifecycle-hooks