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

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

首先，我已经[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并执行我需要的所有操作对话框组件，结果我有了。

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