开发笔记:如何*保存*角度材料模态对话框的结果？

篇首语：本文由编程笔记#小编为大家整理，主要介绍了如何*保存*角度材料模态对话框的结果？相关的知识，希望对你有一定的参考价值。

我有一个组件打开一个模态对话框，让用户输入两个日期。然后我想将这两个日期保存到组件后面的数据库模型中，但是我无法在何时何地获取这些结果。

要清楚：我当前可以在主要组件的模板中看到对话框结果作为两个日期，但我想知道，在...我的主要组件中的某些方法...当对话框关闭且日期为不再为空 - 所以我可以将它们保存到数据库中。

我的主要组件模板有一个带有onClick事件的按钮：

flag 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); }

这是在Dialog Service中定义的confirmDateRange，它实际显示了对话框：

public confirmDateRange(title: string, message: string, begin: Date, end: Date): Observable { let dialogRef: MatDialogRef; 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) { } ngOnInit() { }

对话框的模板：

`{{ title }}`



{{ message }}

在对话框中单击“确定”后，我可以在主要组件的模板中看到带有两个日期的结果数组，如下所示：Result from dialog: {{ dateRangeArray }}。试图在onClickGetDates中访问相同的结果是“太快了”，结果是一个空数组...那么，where / when是在主要组件中查看结果的适当位置？

我觉得我错误地使用了对话框的AfterClose（）事件，并且我应该能够在事件被触发后检索结果，但是我仍然对Angular太过绿色以了解我做错了什么。

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);
});

                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();
                onOkClicked()
                {
                this.response.next({beginDate : beginDate , endDate: endDate});
                this.dialogRef.close();
                }
                onCancelClicked()
                {
                this.dialogRef.close();
                }
                confirmDateRange(title: string, message: string,appt): Observable {
                let dialogRef: MatDialogRef;
                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);
            }
                `