角度マテリアルモーダルダイアログの結果を保存するにはどうすればよいですか？

Question

私は、ユーザが2つの日付を入力できるようにモーダルダイアログを開くコンポーネントを持っています。これらの2つの日付をコンポーネントの背後にあるDBモデルに保存したいと思っていますが、その結果をいつ、どこで取得するかについては頭を悩ましています。

明確にする：私は現在、メインコンポーネントのテンプレート内で2つの日付としてダイアログ結果を見ることができますが、私の知りたいのは...いくつかのメソッド...私のメインコンポーネントで、ダイアログが閉じるとき日付はもはやヌルではないので、DBに保存することができます。

私の主なコンポーネントテンプレートは、onClickイベントとボタンがあります。

<a class="btn btn-sm role="button"><mat-icon title="Get Dates" (click)="onClickGetDates(appt)">flag</mat-icon></a> Result from dialog: {{ dateRangeArray }} 

主成分はonClickイベントを実装します。ここでは

onClickGetDates(appt) { 
    this.dialogService 
     .confirmDateRange('Get Dates', 'Enter two dates:', 
     appt.beginDate, appt.endDate) 
     .subscribe(res => this.dateRange = res); 
. 
. 
// I would like to now save the dateRange result to my database, but at this point, result is [null,null], so the code below does nothing (except null out the dates): 
appt.beginDate = dateRange[0]; 
appt.endDate = dateRange[1]; 
this.apptdata.updateAppt(appt); 
} 

は実際にダイアログサービスで定義されてconfirmDateRange、ありますダイアログを表示します。

public confirmDateRange(title: string, message: string, begin: Date, end: Date): Observable<boolean> { 
    let dialogRef: MatDialogRef<ConfirmDialogComponent>; 

    dialogRef = this.dialog.open(ConfirmDialogComponent); 
    dialogRef.componentInstance.title = title; 
    dialogRef.componentInstance.message = message; 
    dialogRef.componentInstance.beginDate = begin; 
    dialogRef.componentInstance.endDate = end; 

    return dialogRef.afterClosed(); 
    } 

ダイアログコンポーネント：

export class ConfirmDialogComponent implements OnInit { 

    public title: string; 
    public message: string; 

    public beginDate: Date; 
    public endDate: Date; 

    constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>) { } 

    ngOnInit() { 
    } 

、ダイアログのテンプレート： Result from dialog: {{ dateRangeArray }}：

<h2>{{ title }}</h2> 
<hr> 
<p>{{ message }}</p> 

<!--Date Picker Begin--> 

<mat-form-field> 
    <input matInput [matDatepicker]="beginDatePicker" placeholder="Beginning" [(ngModel)]="beginDate"> 
    <mat-datepicker-toggle matSuffix [for]="beginDatePicker"></mat-datepicker-toggle> 
    <mat-datepicker #beginDatePicker></mat-datepicker> 
</mat-form-field> 


<!--Date Picker End--> 

<mat-form-field> 
    <input matInput [matDatepicker]="endDatePicker" placeholder="Ending" [(ngModel)]="endDate"> 
    <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle> 
    <mat-datepicker #endDatePicker></mat-datepicker> 
</mat-form-field> 


<!--OK--> 
<button type="button" mat-raised-button 
     (click)="dialogRef.close([beginDate, endDate])">OK</button> 

<!--Cancel--> 
<button type="button" mat-button 
     (click)="dialogRef.close()">Cancel</button> 

ダイアログで[OK]をクリックした後は、私はこのような主要コンポーネントのテンプレートに2つの日付の結果の配列を見ることができます。 onClickGetDatesの同じ結果にアクセスしようとすると「あまりにも早い」結果がヌル配列になります。そこで、/その部分が私のメインコンポーネントの結果を見るのに適切な場所ですか？

ダイアログのAfterClose（）イベントを誤って使用していて、そのイベントが発生した直後に結果を取得できるはずですが、私は間違っている。

Answer 1

はまさに私のコードでこの

onClickGetDates(appt) { 
    this.dialogService 
     .confirmDateRange('Get Dates', 'Enter two dates:', 
     appt.beginDate, appt.endDate) 
     .subscribe(res => 
     {this.dateRange = res; 
//Set the appt's properties inside the subscribe 
appt.beginDate = this.dateRange[0]; 
appt.endDate = this.dateRange[1]; 
this.apptdata.updateAppt(appt); 
}); 

Answer 2

   Use @Output() to send dates from inner component to outer component and implement a function that call on Ok button and emit that data from that function like : 
       `@Output() response = new EventEmitter()<any>; 

       onOkClicked() 
       { 
       this.response.next({beginDate : beginDate , endDate: endDate}); 
       this.dialogRef.close(); 
       } 

       onCancelClicked() 
       { 
       this.dialogRef.close(); 
       } 

       confirmDateRange(title: string, message: string,appt): Observable<boolean> { 
       let dialogRef: MatDialogRef<ConfirmDialogComponent>; 

       dialogRef = this.dialog.open(ConfirmDialogComponent); 
       dialogRef.componentInstance.title = title; 
       dialogRef.componentInstance.message = message; 
       dialogRef.componentInstance.beginDate = appt.begin; 
       dialogRef.componentInstance.endDate = appt.end; 
       dialogRef.componentInstance.response.subscribe(res : any => { 
       appt.begin = res.beginDate; 
       appt.end = res.endDate; 
       }); 

       } 

      onClickGetDates(title:string , message :string , appt) { 
      this.confirmDateRange(title,message,appt); 
      } 
       `