如何在对话框中用 Angular 2 关闭 Angular Material

Question

我正在编写 Angular 使用 Angular-Material framework 的应用程序。
我正在显示一个 dialog，在此对话框中显示的组件内，我正在向服务器发出 HTTP 请求，当请求结束时，我想关闭对话框。当对话框关闭时，调用对话框的组件会自行刷新。

如果我使用 md-dialog-close，对话框会在 HTTP 请求处理完成之前关闭。

我目前通过在打开对话框时使用以下代码解决了这个问题：

打开对话框

let dialogRef = this.dialog.open(UpdateStageDialogComponent);
dialogRef.componentInstance.dialogRef = dialogRef;

从组件关闭对话框

export class UpdateStageDialogComponent implements OnInit {
  dialogRef: MdDialogRef<UpdateStageDialogComponent>;
  saveForm() {
    this.stageService.update(this.stage).subscribe(
      () => {
        this.dialogRef.close();
      },
      error => {
        alert(error);
      }
    )
  }
}

Answer 1

只需添加对组件的引用即可：

constructor(private dialogRef: MdDialogRef<yourModalComponent>) {}

functionToCallBeforeClosing() {
    this.yourService.yourHttpCall().subscribe(data => this.dialogRef.close());
}

如何在对话框中用 Angular 2 关闭 Angular Material

How to close Angular Material with Angular 2 from within a dialog

angular-material2

angular