マットダイアログが実装されているコンポーネントとマットダイアログコンポーネントとの通信方法を教えてください。

Question

私は、ダイアログと、それにマテリアルダイアログが実装されているappコンポーネントを持っています。 は、ここでアプリのコンポーネント

import { Component } from '@angular/core'; 
import {VERSION, MatDialog, MatDialogRef} from '@angular/material'; 
import { DialogComponent } from '../dialog.component'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent { 
    name = 'Angular 5'; 
    DialogRef: MatDialogRef<DialogComponent>; 
    constructor(private dialog: MatDialog) {} 
    ngOnInit() { 
    } 
    addItem() { 
    this.DialogRef = this.dialog.open(DialogComponent); 
    } 

receiveMessageFromDialogComponent() { 
    // how to receive message from dialog component 
} 
closeDialog(): void { 
    this.DialogRef.close(); 
} 
} 

ダイアログコンポーネントは、フォームが実施される場合、私は、フォームの値を取り、ここでそれを受信する必要があるのコードです。私はこれを達成するために角度入力と出力を使ってみましたが、子供と親のコミュニケーションはありません。ここダイアログコンポーネント

import { Component } from '@angular/core'; 

@Component({ 
    template: ` 
    <h1 mat-dialog-title>Add Item</h1> 
    <mat-dialog-content> 
    <mat-form-field class="example-full-width"> 
     <input matInput placeholder="Item name here..."> 
    </mat-form-field> 
    </mat-dialog-content> 
    <mat-dialog-actions> 
     <button mat-button (click)="saveMessage()">Add</button> 
     <button mat-button (click)="closeDialog()">Cancel</button> 
    </mat-dialog-actions> 
    ` 
}) 
export class DialogComponent { 
    saveMessage() { 
    console.log('how to send data to the app component'); 
    } 
    closeDialog() { 
    console.log('how to close'); 
    } 
} 

Working Example on StackBlitz

Answer 1

A.が this.DialogRefの afterClosed観察可能に加入

あなたはこの

ようapp.component.tsで this.DialogRef.openを呼び出した後、あなたはそれを追加することができますです

addItem() { 
    this.DialogRef = this.dialog.open(DialogComponent); 
    this.DialogRef.afterClosed() 
    .subscribe(return => console.log(return)); 
    } 

B. dialog.component.tsのように、MatDialogサービスをインポートします。この：

import { Component, Inject } from '@angular/core'; 
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from'@angular/material'; 

C.はdialogRefがsaveMessage()方法では、この

constructor(public dialogRef: MatDialogRef<DialogComponent>, 
    @Inject(MAT_DIALOG_DATA) public data: any) {} 

C.のようなあなたのダイアログコンストラクタに渡されていることを確認し、ダイアログを閉じメソッドをコールし、必要な値を渡しますappコンポーネントに戻ります。それはまた、