Angular 4：何时以及为何在构造函数中使用@Inject？

Question

问题陈述

我正在学习 Angular 4，我偶然发现了一个代码，其中 @Inject 被用于 constructor 我无法弄清楚为什么……

代码和来源

我正在使用 Angular 4 材质

代码来源： https: //material.angular.io/components/dialog/overview

在代码中，他们正在注入 MAT_DIALOG_DATA

 constructor(public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
             @Inject(MAT_DIALOG_DATA) public data: any
           ) { }

任何人都可以详细说明这是什么意思以及我们应该何时/何地这样做吗？

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

Answer 1

@Inject() 是一种让 Angular 知道必须注入 参数的 手动 机制。

 import { Component, Inject } from '@angular/core';
import { ChatWidget } from '../components/chat-widget';

@Component({
  selector: 'app-root',
  template: `Encryption: {{ encryption }}`
})
export class AppComponent {
  encryption = this.chatWidget.chatSocket.encryption;

  constructor(@Inject(ChatWidget) private chatWidget) { }
}

In the above we’ve asked for chatWidget to be the singleton Angular associates with the class symbol ChatWidget by calling @Inject(ChatWidget) .重要的是要注意，我们使用 ChatWidget 作为其类型 和 对其单例的 _引用_。我们 没有 使用 ChatWidget 来实例化任何东西，Angular 在幕后为我们做了这些

来自 https://angular-2-training-book.rangle.io/handout/di/angular2/inject_and_injectable.html

原文由 Rahul Singh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Angular 中的 IoC 容器使用构造函数中的类型声明来确定要注入到构造函数参数的对象。

在您的示例中，“ public data: any ”参数无法由其类型声明确定，因为它被定义为“any”。为了解决这个问题，你必须使用“ @Inject(MAT_DIALOG_DATA) ”装饰器通知IoC容器关于必须注入到“ data 参数的对象。

同样在您的示例中，“ @Inject ”装饰器与 InjectionToken 一起使用，使事情变得更加复杂:)

InjectionToken 实际上是一个类，用于命名 IoC 容器使用的对象以注入到其他类中。通常，您可以使用任何类名称作为 IoC 注入的标记（例如您的示例中的“ MatDialogRef<DialogOverviewExampleDialog> ”），这工作正常。但是当你开始编写你的单元测试时，你意识到你需要使用模拟对象而不是真实的对象来注入你的类，而当你使用真实的类名作为你的标记时，你不能那样做。

要解决这个问题，您可以使用 Interfaces 作为标记名称，这实际上是正确的解决方案，但由于 JavaScript 不支持接口，您不能使用 Interface 名称作为标记，因为转译代码不包含 Interface 定义。

由于这一切，您需要使用 InjectionToken 。 InjectionToken 允许您将任何对象注入构造函数。你只需要在你的模块中声明它并映射到你想要注入的真实类。这样您就可以为您的生产代码和测试代码使用不同的类。

原文由 Yildiray Meric 发布，翻译遵循 CC BY-SA 3.0 许可协议