从 Angular Material 2 中的 MdDialog 返回数据

Posted 2023-03-13

【中文标题】从 Angular Material 2 中的 MdDialog 返回数据

【英文标题】：Returning Data from MdDialog in Angular Material 2

【发布时间】：2018-01-20 17:26:43

【问题描述】：

我正在使用 MdDialogModule 来显示一个对话框窗口，其中包含一个输入字段。模态打开正常，我可以在输入字段中输入文本并提交，但是单击提交按钮时，我希望输入表单中的数据返回到调用对话框组件的主组件并关闭对话框.

我该怎么做？我能够将数据传递给 MdDialog 组件，但没有找到任何有关如何从 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()  

主组件中调用对话框的方法如下所示。现在没有返回响应，它返回 Undefined 因为我还没有弄清楚。

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

【参考方案1】：

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

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

然后使用dialogRef.close返回数据

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

【讨论】：

你如何从父组件中得到它？

@ErayT 这不是提问者提出的问题吗？

@HarryNinh 没错，但我认为他们忘记了。无论如何，无论谁在寻找解决方案：在父组件的构造函数中添加“@Inject(MAT_DIALOG_DATA) public data: any”然后你可以通过使用“this.data.data”得到它

哦，你反了。 @Inject(MAT_DIALOG_DATA) 应该放在孩子（也就是对话框）中，而不是父母（也就是想要弹出对话框的人）。

对于新版本，请确保使用MatDialogRef 而不是MdDialogRef。另外，如果你想向这个 AddBookComponent 传递数据，你需要添加到构造函数@Inject(MAT_DIALOG_DATA) data: any。

【参考方案2】：

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

下面是整个相关脚本

组件 ts：

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

对话 ts：

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

【讨论】：

这应该是公认的答案。接受的没有说明如何处理返回的数据。

@SilvioLangereis，OP 已经在问题中解决了这个问题。

【参考方案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()
  
);