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

Question

我正在使用角度材料对话框2.

我想将数据传递给打开的组件.这是我点击按钮时打开对话框的方式

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
            data :{'name':'Sunil'}
        });

在文档页面上有data属性,但是我在已安装的软件包中检查了MdDialogConfig

/**
 * Configuration for opening a modal dialog with the MdDialog service.
 */
export declare class MdDialogConfig {
    viewContainerRef?: ViewContainerRef;
    /** The ARIA role of the dialog element. */
    role?: DialogRole;
    /** Whether the user can use escape or clicking outside to close a modal. */
    disableClose?: boolean;
    /** Width of the dialog. */
    width?: string;
    /** Height of the dialog. */
    height?: string;
    /** Position overrides. */
    position?: DialogPosition;
}

配置类中没有数据属性.

现在我如何访问传递的数据？

Answer 1

对于最新版本的对话框(这是在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

Answer 2

更新2(Angular 5+)

这个答案已经过时了.相反,看一下epiphanatic的答案.

UPDATE

您可以使用它dialogRef.componentInstance.myProperty = 'some data'来设置组件上的数据.

你需要这样的东西:

let dialogRef = this.dialog.open(DialogComponent, {
            disableClose: true,
        });
dialogRef.componentInstance.name = 'Sunil';

然后在DialogComponent你的需要添加你的name property:

...

@Component({
  ...
})
export class DialogComponent {
   public name: string;

   ...

}

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

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

我成功找到了数据dialogRef._containerInstance.dialogConfig.data;

所以你可以做的就是举例

let name = dialogRef._containerInstance.dialogConfig.data.name;
console.log(name); // Sunil

Answer 3

我认为我会为仍在学习中的我们这些人提供更完整的答案：

与“材料示例”不同，我将对话框配置为具有自己的组件文件（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>

希望对您有所帮助。

Answer 4

对于 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;
}