Angular 组件中的@Inject 是什么意思？答案

【问题标题】：What does it mean @Inject in Angular component?Angular 组件中的@Inject 是什么意思？
【发布时间】：2019-09-17 15:26:02
【问题描述】：

组件的构造函数中有这个：

export class MyDialogComponent implements OnInit, OnDestroy {

 constructor(
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

}

什么意思：@Inject(MAT_DIALOG_DATA)？

【问题讨论】：

Angular 4: When and why is @Inject is used in constructor?的可能重复
为什么不简单：构造函数（公共数据：任意）？

标签： angular angular8

【解决方案1】：

0) @Inject 的定义

Angular Inject 装饰器定义取自 rangle.io：

@Inject()

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

1) MAT_DIALOG_DATA 的定义

来自角度material dialog api：

MAT_DIALOG_DATA

可用于访问传入数据的注入令牌到一个对话框。

2) 材料文档中@Inject(MAT_DIALOG_DATA) 的用法

在dialog docs 中，您可以找到如何与对话框组件共享数据。

如果您想与对话框共享数据，可以使用 data 选项将信息传递给对话框组件。

let dialogRef = dialog.open(YourDialog, {
  data: { name: 'austin' },
});

要访问对话框组件中的数据，您必须使用 MAT_DIALOG_DATA 注入令牌：

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data.name }}',
})
export class YourDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

3) 完整的 stackblitz 示例

附加材料文档在 stackblitz 上提供了一个简单的full working example。

【讨论】：

【解决方案2】：

在这样的工厂函数中，使用此函数来请求注入依赖项比提供额外的依赖项数组（这在 useFactory 提供程序中很常见）更快且类型更安全。

依赖注入 (DI) 重述如果你使用 Inject 那么你不需要在提供者中传递服务：[]

【讨论】：