2017-08-12 4 views
4

MdDialogModuleを使用して、入力フィールドを含むダイアログウィンドウを表示しています。モーダルが正常に開き、入力フィールドにテキストを入力してサブミットすることができますが、[送信]ボタンをクリックすると、入力フォームのデータをDialogコンポーネントを呼び出したメインコンポーネントに返し、ダイアログも閉じます。角材2のMdDialogからデータを返す

どうすればよいですか? 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); 
     }); 
    } 

答えて

9

まず、あなたはありがとうございデータ

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

を返すためにdialogRef.closeを使用すると

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

あなたのダイアログコンポーネントにMdDialogRefを追加する必要があります。出来た。 –

関連する問題