Angular2 material 对话框自动关闭

Question

我用了angular2 material MdDialog来显示一个表单。

当用户提交表单时，会向后端发送一个请求，如果请求成功，我需要关闭对话框。如果后端请求失败，我需要保持对话框打开。

我可以使用如下按钮关闭对话框。

<button md-raised-button md-dialog-close>Cancel</button>

但是，在这种情况下，我只需要在后端请求成功时关闭对话框，所以我需要一种以编程方式关闭对话框的方法。

显示在对话框中的组件没有对话框引用，我不知道从组件中自行关闭对话框的任何其他方法。

有什么方法可以从对话框内的组件中关闭对话框？

Answer 1

如果您想从对话框中关闭它：

constructor(private dialogRef: MatDialogRef<MyDialogComponent>){ }

closeDialog(){
  this.dialogRef.close();
}

如果您想从对话框的父级关闭它：

constructor(private matDialog: MatDialog){}

//anywhere
let dialogRef = this.matDialog.open(MyDialogComponent);
dialogRef.close();

Answer 2

下面这个对我来说很好用

this.matDialog.closeAll();

Answer 3

如已接受的答案所述

this.dialogRef.close();

关闭对话框。但大多数时候我们希望服务器的响应能够立即呈现而不刷新页面。为此，我们将响应作为参数传递给关闭方法，如下所示

this.dialogRef.close(response);

如果您这样做，则无需执行文档中的事件发射器方法

<button mat-button [mat-dialog-close]="response" cdkFocusInitial>Add</button>

因为它在异步操作完成之前关闭了对话框。

Angular2 material dialog self close