javascript - mat-dialog 在下次打开时记住以前的数据

Question

我使用 mat-dialog 并遇到了与保留先前打开的窗口中的数据有关的问题。

• 打开它以添加记录时，该字段为空。

• 但是，如果我打开它进行编辑，然后打开以添加新记录，它会保留先前打开的对话框中的数据。

所以，我想在对话框关闭事件中防止这种情况发生，但是我没有找到一种合适的方法来捕捉对话框关闭时的情况，除了以下由于我们的对话框模板的某些限制而无法使用的方法。

dialogRef.afterClosed().subscribe(result => {
    this.dataService.onSelectCustomer.next([]); 
});

那么，如何通过 mat-dialog 属性或捕获关闭事件来解决这个问题呢？当通过单击取消或在窗口外关闭对话框时触发事件也足够了。

标签： javascriptangularangular-materialdialogmodal-dialog

Answer 1

对于可能遇到类似问题的人，我想分享一下我刚刚找到的解决方案：

• 然后我们创建一个 MatDialogConfig 实例，它将使用一组默认行为配置对话框

• 我们正在覆盖其中的一些默认行为。例如，我们将 disableClose 设置为 true，这意味着用户将无法通过单击对话框外部来关闭对话框

• 我们还将autoFocus 设置为true，这意味着焦点将自动设置在对话框的第一个表单域上

openDialog() {
  const dialogConfig = new MatDialogConfig();

  dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;

  dialogConfig.data = {
      id: 1,
      title: 'Angular For Beginners'
  };

  this.dialog.open(CourseDialogComponent, dialogConfig);
}