防止在外部单击时关闭 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;
  });
}

防止在外部单击时关闭 MatDialog 并进行未决更改

Prevent MatDialog From Closing When Clicked Outside with pending changes

javascript

dialog

typescript

angular-material

angular