如何将数据传递到角度材质的对话框 2

Question

我正在使用AngularMaterial2的对话框。

我想将数据传递给打开的组件。以下是单击按钮打开对话框的方式

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

在文档页面上有数据属性，但我在已安装的软件包中检查了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

我想我应该给我们这些仍在学习的人一个更完整的答案：

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

}

调用该函数与openDia从html文件

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 2

这答案是相当过时。看看epi

<罢工>

您可以使用<代码> dialogRef.componentInstance.myPr

你需要这样的:

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

然后，在对话框组件中，需要添加名称属性：

...

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

   ...

}

<罢工>

<罢工>我没有找到任何文档

我成功定位了< code>dialogRef中的数据。_ container instance . dialog config . data ；

所以你能做的是，举个例子

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

<罢工>

Answer 3

对于dialog的最新版本(这是Angular 5之前的版本，对于Angular 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)
}

或者你可以使用模板或其他访问它

更新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';