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

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

首先，我已经从“确定”按钮的调用中删除了[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 2

我解决了类似的问题，因为我希望在关闭之前弹出确认关闭警告，然后取消或延迟关闭直到确认。为了解决这个问题，我在对话框上将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 3

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

Angular 6 MatDialog取消关闭事件

3 个答案: