Angular 7 Material 对话框配置数据注入名称冲突答案

【问题标题】：Angular 7 Material dialog config data inject name conflictAngular 7 Material 对话框配置数据注入名称冲突
【发布时间】：2019-07-29 18:40:55
【问题描述】：

我试图在打开材质对话框面板时传递一些数据。下面的例子是我从here学到的

与 Dialog 组件共享数据。

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

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

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

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

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data.name }}',
})
export class YourDialog {
  data: any[] = []; // existing code, conflict
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

现在问题出在对话框组件中，已经定义并使用了一个变量data。并且变量名称data 作为配置传递到对话框中是由 Angular Material Dialog 决定的。所以会导致命名冲突。我可以将现有的 data 变量更改为其他变量，以让位于 Angular 注入的 data，但是有没有办法将注入的 data 更改为其他变量？谢谢。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您不必保留相同的变量名称。

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

为什么会这样是因为参数已经被@Inject(MAT_DIALOG_DATA) 修饰了，所以参数的实际名称并不重要。根据数据类型及其使用方式（以及您可能习惯的任何其他命名规则），使用最合适的名称。

Stackblitz，见类DialogDataExampleDialog

【讨论】：

谢谢！有用。我以为构造函数参数中的数据对应于open方法中的数据。我想知道对话框构造函数是如何知道anyOtherNameHereIsOk对应于open方法调用的数据，因为在open方法调用中，实际上我们传入了另一个名为panelClass的字段以及data。
@ElgsQianChen - MatDialog.open 的第二个参数需要一个名为 data 的成员类型。无论您分配什么，都会传递给对话框的构造函数参数，该参数用@Inject(MAT_DIALOG_DATA) 装饰，并且参数的名称可以是您想要的任何名称。