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

Question

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

我该怎么做？我能够将数据传递给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); 
     }); 
    } 

Answer 1

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

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

然后使用dialogRef.close返回数据

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