代码之家 › 专栏 › 技术社区 › Hisham Mubarak

从角度材质2中的MdDialog返回数据

mddialog angular-material2 dialog angular

27

Hisham Mubarak · 技术社区 · 9 年前

我使用MdDialogModule显示一个对话框窗口,其中包含一个输入字段。模式打开良好,我可以在输入字段中输入文本并提交,但单击提交按钮后,我希望输入表单中的数据返回到称为对话框组件的主组件,并关闭对话框。

我该怎么做?我能够将数据传递给MdDialog组件,但并没有找到任何关于如何从MdDialogComponent将数据返回到组件的资源。

import { Component, OnInit, InjectionToken, Inject } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from "@angular/material";

@Component({
  selector: 'app-add-book',
  templateUrl: './add-book.component.html',
  styleUrls: ['./add-book.component.css']
})
export class AddBookComponent {

  constructor() { }

}

openCreateDialog() {
    let dialogRef = this.dialog.open(AddBookComponent)
      .afterClosed()
      .subscribe(response => {
        console.log(response);
      });
  }

4 回复 | 直到 9 年前

1

52

Harry Ninh 9 年前

首先,您需要添加 MdDialogRef 到对话框组件

export class AddBookComponent {
  constructor(private dialogRef: MdDialogRef<AddBookComponent>) { }
}

然后使用 dialogRef.close 返回数据

save() {
  this.dialogRef.close({ data: 'data' });
}

2

11

W Kenny 7 年前

下面是整个相关脚本

组件ts:

  let dialogRef = this.dialog.open(DataListDialogComponent, dialogConfig).afterClosed()
  .subscribe(response => {
    console.log(response);
  });

    this.dialogRef.close({data:'data'});

3

1

Rohan Shenoy 7 年前

“dialog.open”可用于打开对话框组件。

您可以通过添加第二个参数来指定要发送到对话框组件的数据。这可以包含宽度和高度检查文档等信息以了解更多信息。

如果您希望从对话框中获得数据,则可以使用ref.componentInstance。updatedSelectedArms,它是在需要时触发的事件

var ref = this.dialog.open(SelectLoadingArmComponent, {
  width: '500px',
  data: { 
    loadingArms: this.loadingArms, 
    selectedloadingArms: this.selectedloadingArms
  }
});

ref.componentInstance.updatedSelectedArms.subscribe(
  (data) => {
    console.log(data)
    ref.close()
  }
);

4

1

Eric Aya 4 年前

其他答案已经回答了这个问题。但是,让我对我在用例中使用的解决方案进行更详细的解释。

我的要求是在对话框中创建一个确认删除按钮。所以我想收到结果,无论用户是否确认删除。

所以我的可重复使用 Dialog component 如下所示:

import { Component, Inject } from "@angular/core";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
import { ConfirmDialogDAO } from "./confirm.dialog.dao";

@Component({
    templateUrl: "./confirm.dialog.html"
})
export class ConfirmDialog {

    constructor(@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogDAO,
                private dialogRef: MatDialogRef<ConfirmDialog>) {
    }

    yesButtonClicked(): void {
        this.dialogRef.close(true);
    }

}

上面的dialogRef很重要,因为使用它可以在对话框关闭时根据用户对该组件的操作发出事件。

<h1 mat-dialog-title>{{ data.title }}</h1>
<div mat-dialog-content>
  {{ data.description }}
</div>
<div mat-dialog-actions>
    <button mat-raised-button mat-dialog-close color="warn" (click)="yesButtonClicked()">{{ data.yesButtonName }}</button>
    <button mat-raised-button mat-dialog-close color="accent" cdkFocusInitial>{{ data.noButtonName }}</button>
</div>

如果您注意到,只有当用户单击+ve确认按钮时,我才发出一个事件。

现在,在我想要重用此对话框的实际组件中,我是这样调用对话框并对数据返回执行操作的:

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

@Component({
  templateUrl: './another.component.html',
  styleUrls: ['./another.component.css']
})
export class AnotherComponent {

constructor(private dialog: MatDialog) { }

deleteInputNode(): void {
    this.dialog.open(ConfirmDialog, {
      data: {
        title: `Delete input node?`,
        description: `Please confirm:`,
        yesButtonName: `Delete`,
        noButtonName: `Cancel`
      },
    }).afterClosed().subscribe(data => {
      if (data) {
        alert("Delete"); // Perform one action
      } else {
        alert("Not delete");  // Perform another action
      }
    });
  }

}

所以订阅afterClosed()事件将使我们能够访问从对话框组件返回的数据。

在我的例子中,我只返回true/false值,但您也可以发射对象: {key: value}

如果我的解释缺乏一些细节,请参考stackblitz的这个实例: https://stackblitz.com/edit/matdialog-return-data-demo-qqscz9?file=app%2Ffile-name-dialog.component.ts