在 Angular Material 2 中从 MdDialog 返回数据

Question

我正在使用 MdDialogModule 显示带有输入字段的对话框 window。模态打开正常，我可以在输入字段中输入文本并提交，但是在单击提交按钮时，我希望输入表单中的数据 returned 到调用对话框组件的主组件并关闭对话框。

我该怎么做？我能够将数据传递给 MdDialog 组件，但没有找到任何关于如何 return 从 MdDialogComponent 向组件传递数据的资源。

我的 Dialog 组件代码如下所示

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

}

主组件中调用对话框的方法如下所示。现在 return 没有回复，它 return 未定义，因为我还没有弄明白。

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

Answer 1

首先，您需要将 MdDialogRef 添加到您的对话框组件

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

然后使用dialogRef.close到return数据

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

Answer 2

首先感谢哈利的评论...

下面是完整的相关脚本

组件 ts:

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

对话 ts:

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

Answer 3

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

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

要关闭您可以使用 ref.close()。

如果您希望从对话框中获取数据，那么您可以使用 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()
  }
);

在 Angular Material 2 中从 MdDialog 返回数据

Returning Data from MdDialog in Angular Material 2

dialog

mddialog

angular-material2

angular