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

【问题标题】：How to close Angular Material with Angular 2 from within a dialog如何在对话框中使用 Angular 2 关闭 Angular Material
【发布时间】：2017-12-15 13:25:31
【问题描述】：

我正在编写使用 Angular-Material framework 的 Angular 应用程序。
我在此对话框中显示的组件内提供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);
      }
    )
  }
}

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

只需添加对您的组件的引用：

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

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

【讨论】：

Angular 会注入 dialogRef?
不太清楚，知道怎么用，不怎么解释，不好意思
如果我不得不解释，我会说 MdDialogRef 是一个单例，Angular 将它注入到你的组件中，以便你可以控制它