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

Question

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

export class MyDialogComponent implements OnInit, OnDestroy {

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

}

什么意思：@Inject(MAT_DIALOG_DATA)？

Answer 1

0) @Inject

的定义

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

@Inject()

@Inject() is a manual mechanism for letting Angular know that a parameter must be injected.

1) MAT_DIALOG_DATA

的定义

来自angular material dialog api:

MAT_DIALOG_DATA

Injection token that can be used to access the data that was passed in to a dialog.

2) @Inject(MAT_DIALOG_DATA) 的用法来自 material 文档

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

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

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 示例

另外 material 文档在 stackblitz 提供了一个简单的 full working example。

Answer 2

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

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

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

What does it mean @Inject in Angular component?

angular

angular8