Angular 6 MatDialog取消关闭事件

Question

我有两个组件：CustomerComponent 和 CustomerCreateUpdateComponent。

CustomerComponent包含客户数据表。 CustomerCreateUpdateComponent 是一个带有用于创建/更新的输入控件的表单。

我有mat-dialog 和CustomerCreateUpdateComponent。 打开对话框并填写表格后，我单击提交按钮并执行this.dialogRef.close(customer);。 customer 对象具有所有值。

在CustomerComponent 我在subscribe 上this.dialog.open(CustomerCreateUpdateComponent).beforeClose().subscribe((customer: Customer) => { ... });

它是beforeClose() 方法，所以在对话框关闭之前，我会取回customer 对象并将其发布到api。

如果 POST 成功，一切正常，对话框关闭并更新数据表。

但是，如果 POST 没有成功，api 将返回一个错误，我想向用户显示并保持对话框打开，类似于if(error) { closeEvent.cancel() }

我已经查看了mat-dialog 的整个文档，没有任何帮助。我几乎可以肯定没有办法做到这一点。

也许有人有同样的问题？很高兴听到任何解决方法。

Answer 1

我解决了一个类似的问题，因为我希望在关闭之前弹出一个确认关闭警告，然后取消或延迟关闭直到它被确认。为了解决这个问题，我在对话框中将disableClose 选项设置为true。我将我的 close 方法钩子添加到了 backgroundClick 钩子中，以便它以类似的方式运行。

this.dialogRef.backdropClick().subscribe(() => { this.close(); });

close() 是我在对话框中处理关闭事件的方法。这只是打开一个确认框，如果答案是肯定的则关闭

close() {
    this.confirm.open({ title: 'Would you like to acknowledge this message?' }).pipe(
      tap(answer => { if (answer === true) { this.dialogRef.close(); } }),
    ).subscribe();
}

向关闭钩子添加取消回调只是一种方便，这可能是他们尚未正确完成的原因。

Answer 2

我遇到了同样的麻烦，并找到了一些“解决方案”。据我了解，您无法阻止对话框的关闭事件，因此我试图找到一些替代方法。

首先，我已经像这样从 OK 按钮的调用中删除了 [mat-dialog-close]="..." cdkFocusInitial。

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()">No Thanks</button>
  <button mat-button (click)="clickOn()">Ok</button>
</div>

之后，我将 service 对象传递给对话框的组件，并从对话框的组件进行 POST 调用，如果现在一切正常，我将调用 dialogRef.close(...callbackResull...) 否则我不会关闭 dialogRef 并在 Dialog-component 中执行我需要的所有操作，结果我有。

    clickOn() {
        <Your POST call which returns observable>.subscribe(() => {
              this.dialogRef.close(this.selfRequest);
            },
            error1 => {
              // Do here what you need
            });
        }
    }

Answer 3

this.dialog.afterAllClosed.subscribe(
  () => (this.isDialogOpen = false)
);