时间戳

首页 > 解决方案 > Angular 组件中的@Inject 是什么意思？

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

问题描述

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

export class MyDialogComponent implements OnInit, OnDestroy {

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

}

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

标签： angularangular8

解决方案

0) @Inject 的定义

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

@注入（）

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

1) MAT_DIALOG_DATA 的定义

从角度材料对话框 api：

MAT_DIALOG_DATA

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

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

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

如果要与对话框共享数据，可以使用 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 上提供了一个简单的完整工作示例。

推荐阅读