Angular 6 MatDialog 取消关闭事件

Question

我有两个组件：CustomerComponent和CustomerCreateUpdateComponent。 CustomerComponent包括客户数据表。 CustomerCreateUpdateComponent是一个带有输入控件的用于创建/更新的表单。

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

在CustomerComponent中，我订阅了this.dialog.open（CustomerCreateUpdateComponent）.beforeClose（）。subscribe（（customer：Customer）=> {...}）; 这是beforeClose()方法，因此在对话框关闭之前，我会返回customer对象并将其POST到API。

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

但是，如果POST失败，API将返回错误，我希望向用户显示错误并保持对话框打开，例如if(error) {closeEvent.cancel()} 我已经查看了整个mat-dialog文档，但没有发现有用的信息。 我几乎可以确定没有方法可以做到这一点。

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

- Alex Ejibishvili

Answer 1

我之前解决了一个类似的问题，因为我想在关闭前弹出确认关闭警告，然后取消或延迟关闭直到得到确认。为了处理这个问题，我在对话框上将 disableClose 选项设置为 true。我将我的关闭方法钩子添加到背景单击钩子中，以使其表现方式类似。

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();
}

在关闭钩子中添加一个取消回调只是一种方便，这也可能是为什么他们还没有做好的原因。

- Joel Duckworth

---

在我看来，最好的解决方案，而不是一种hack方法！ - Arno 2501

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
            });
        }
    }

- Garik Kalashyan

---

你的解决方案与我的解决方案类似。我在CustomerCreateUpdateComponent中调用POST请求。如果一切正常，我就会调用this.dialogRef.close事件，否则我会向用户提供错误消息。但是，我认为如果this.dialog.open(CustomerCreateUpdateComponent).beforeClose().subscribe方法有像event.cancel这样的东西会更好。 - Alex Ejibishvili

完全同意你的观点！ - Garik Kalashyan

Answer 3

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

- Hani

---

请提供至少一些描述，说明这个答案为什么回答了问题。 - Markus Deibel