防止 MatDialog 在外部单击且未决更改时关闭

Question

当有未决的更改时，我想防止关闭外部。 我是这样的，但没有结果。

this.dialogRef.beforeClosed().subscribe(() => {
  this.dialogRef.close(false);
  //some code logic
  //...
});

MatDialog 上的disableClose必须保持为false

Answer 1

最初，在打开对话框时，您可以将“disableClose”作为 true 传递，然后在没有待处理的更改时手动关闭背景单击或退出单击时的对话框。

this.dialog.open(DialogComponent, { disableClose: true });

dialogRef.backdropClick().subscribe( () => {
   if(!pendingChanges) dialogRef.close();
   // else do nothing
});

Answer 2

根据具体情况，您最初可以将disableClose设置为false ，以便用户可以在没有挂起的更改时关闭它，具体取决于挂起的更改是什么，例如，如果是异步调用，您可以将disableClose设置为true .

然后，您还可以将MatDialogRef注入组件本身并根据您的要求手动切换disableClose ，如下所示：

constructor(private matDialogRef: MatDialogRef<WhateverYourDialogIsCalled>) {}

然后在异步调用中它可能是：

onSubmit() {
  this.matDialogRef.disableClose = true;
  this.myService.doSomething().subscribe(_ => {
    this.matDialogRef.disableClose = false;
  });
}