Question

组件的构造函数中有这个

export class MyDialogComponent implements OnInit, OnDestroy {

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

}

这是什么意思：@Inject(MAT_DIALOG_DATA)？

Answer 1

0）@Inject的定义

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

@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上提供了一个简单的full working example。

Answer 2

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

依赖注入（DI）概述如果使用Inject，则无需在提供程序中传递服务：[]

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

2 个答案: