Question

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

中学到的

使用“对话框”组件共享数据。

如果要与对话框共享数据，则可以使用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';

@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对话框决定。因此，它导致命名冲突。我可以将现有的data变量更改为其他变量，以让位给Angular注入的data，但是有没有办法将注入的data更改为其他变量？谢谢。

Answer 1

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

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

之所以可行，是因为参数已经用@Inject(MAT_DIALOG_DATA)修饰了，所以参数的实际名称无关紧要。在给定数据类型和使用方式（以及您可能习惯的其他命名规则）的情况下，使用最合适的名称。

Stackblitz，请参阅类DialogDataExampleDialog

Angular 7材质对话框配置数据注入名称冲突

使用“对话框”组件共享数据。

1 个答案: