如何将数据传递给角度材料2的对话框

对于最新版本的对话框（这是 Angular 5 之前的版本，对于 5，请参阅下面的更新），您可以执行以下操作以通过配置传递数据，这更加简单和清晰。

当您打开对话框时，您可以通过添加数据作为配置参数来做到这一点（只需忽略用于说明目的的宽度和高度）：

this.dialogRef = this.dialog.open(someComponent, {
  width: '330px',
  height: '400px',
  data: {
    dataKey: yourData
  }
});

然后在对话框中打开的组件中，您可以像这样访问它：

import {MD_DIALOG_DATA} from '@angular/material';
import { Inject } from '@angular/core';


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

ngOnInit() {
  // will log the entire data object
  console.log(this.data)
}

或者您可以在模板或其他方法中使用访问它，但您明白了。

更新 Angular 5

材质中的所有内容都从 Md 更改为 Mat，所以如果在 Angular 5 上，导入如下：

import {MAT_DIALOG_DATA} from '@angular/material'

然后像注入

@Inject(MAT_DIALOG_DATA) public data: any

更新 Angular 9

MAT_DIALOG_DATA 导入位置已更改为：

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

---

更新 2（角度 5+）

这个答案已经过时了。看看epiphanatic's answer instead。

更新您可以使用 dialogRef.componentInstance.myProperty = 'some data' 在组件上设置数据。你需要这样的东西： let dialogRef = this.dialog.open(DialogComponent, { disableClose: true, }); dialogRef.componentInstance.name = 'Sunil';然后在您的 DialogComponent 中，您需要添加您的 name 属性： ... @Component({ ... }) export class DialogComponent { public name: string; ... }

下面的文字在 @angular/material 的较新版本中无效

我没有找到任何文档，所以我也开始研究源代码。因此，这可能不是官方的做法。

我成功定位到 dialogRef._containerInstance.dialogConfig.data 中的数据；所以你可以做的是例如 let name = dialogRef._containerInstance.dialogConfig.data.name;控制台.log（名称）； // 苏尼尔

---

我想我会给我们这些还在学习的人一个更全面的答案：

与材料示例不同，我将对话框配置为拥有自己的组件文件（html、css 和 ts），以便于调试。

主组件文件“x.component.ts”（调用对话框）

1）添加导入语句

import { MatDialog} from '@angular/material';

2）将属性添加到构造函数参数

public dialog: MatDialog

3) 定义调用对话框的代码

  openDialog(title: string, text: string): void {
const dialogRef = this.dialog.open(DialogComponent, {
  width: '350px',
  data: {dialogTitle: title, dialogText: text}
);

dialogRef.afterClosed().subscribe(result => {
});

  const dialogSubmitSubscription = 
  dialogRef.componentInstance.submitClicked.subscribe(result => {
  dialogSubmitSubscription.unsubscribe();
});

}

使用 openDialog() 从您的 html 文件中调用该函数。我正在引用 DialogComponent，因此请确保将其导入到您的模块中。

import { DialogComponent } from './dialog/dialog.component';

还

entryComponents: [DialogComponent]

在您的 entryComponents 数组中声明它

4) 在您的 dialog.component.ts 文件中，添加导入

import { Component, Output, EventEmitter, Inject, OnInit} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

5) 定义属性和功能

dialogTitle: string;
dialogText: string;
@Output() submitClicked = new EventEmitter<any>();

  constructor(
    public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}


  ngOnInit() {
    this.dialogTitle = this.data.dialogTitle;
    this.dialogText = this.data.dialogText;
  }

  saveMessage() {
    const data = 'Your data';
    this.submitClicked.emit(data);
    this.dialogRef.close();
  }

  closeDialog() {
    this.dialogRef.close();
  }

6) 最后是 HTML

<h1 mat-dialog-title>{{dialogTitle}}"</h1>
<div mat-dialog-content>
  <p>{{dialogText}}</p>

</div>
<div mat-dialog-actions>
  <button mat-button (click)="saveMessage()" >Ok</button>
  <button mat-button (click)="closeDialog()" cdkFocusInitial>No Thanks</button>

</div>

我希望它有所帮助。

---

对于任何发现角度 10 或 11 的人，唯一的区别是您使用：

import {MAT_DIALOG_DATA} from '@angular/material/dialog';

代替：

import {MAT_DIALOG_DATA } from '@angular/material';

官方页面是 here。

---

对于 Angular 13，要将对象传递到对话框数据结构中，我必须使用以下内容：

const dialogRef = this.dialog.open(MyDialog, {
  data: { myObjectHolder: myObject }
});

然后在对话框类中使用：

private myObject: MyObjectClass;

constructor(@Inject(MAT_DIALOG_DATA) data: { myObjectHolder: MyObjectClass }) {
    this.myObject = data.myObjectHolder;
}

---

所以我添加了方法并且它在一个组件上工作，但是如果我想制作一个对话框（另一个组件），它就不起作用

表格组件和删除按钮

  openDeleteDialog(user) {
    this.dialog.open(DeleteUserDialogComponent, {
      width: '30%', disableClose: true, data: user
    });
  }

组件对话框

export class DeleteUserDialogComponent {

  dataSource = new MatTableDataSource();

  constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DeleteUserDialogComponent>, private userService: UserService, @Inject(MAT_DIALOG_DATA) public data: any) {}


  deleteUser() {
    this.dataSource.data.splice(this.dataSource.data.indexOf(this.data), 1);
    this.dataSource.data = [...this.dataSource.data];
    console.log(this.dataSource.data);
    console.log(this.data)
  }

  click(): void {
    this.dialogRef.close();
  }
}

---

如果您使用对话框处理 HTTP 数据，请记住 RxJS 和 Observables 非常适合此问题。

对话服务：

    private _dialogDataSubj$ = new Subject<DialogData>();
    dialogData$ = this._dialogDataSubj$.asObservable()

    setDialogData(data: DialogData) {
        this._dialogDataSubj$.next(data)
    }

在对话框 HTML 中：

<ng-container *ngIf="dialogData$ | async as data; else doneTmp">

我不确定是否只有我，但我无法仅使用对话框数据引用 (@Inject) 更新我的材质对话框中的数据，即：dialogRef.data = newData。

---