Question

我正在使用角度素材的dialog box。

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

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

对于最新版本的对话框（这是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's answer instead。

<击>

更新

您可以使用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

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

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

代替：

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

官方页面是here。

Answer 4

我想我会为仍在学习中的我们一个更全面的答案：

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

因此，我已经添加了该方法，并且该方法可以在一个组件上使用，但是如果我要创建一个对话框（另一个组件），则无法使用它

表的组成部分和删除按钮

  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();
  }
}

Answer 6

如果您使用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来更新材质对话框中的数据。

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

6 个答案:

更新2（Angular 5 +）

更新

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