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

Posted 2023-03-13

【中文标题】防止 MatDialog 在外部单击且未决更改时关闭

【英文标题】：Prevent MatDialog From Closing When Clicked Outside with pending changes

【发布时间】：2022-01-15 03:07:22

【问题描述】：

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

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

MatDialog 上的disableClose 必须保留false

【问题讨论】：

the disableClose on MatDialog have to stay true?你的意思是false？

是的，抱歉，我会更改请求

【参考方案1】：

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

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

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

【参考方案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;
  );