從角度材質中的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' }); 
}