Angular2材质对话框自我关闭

时间:2017-06-24 10:17:23

标签: angular angular-material2

我使用angular2材质MdDialog来显示表单。

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

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

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

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

对话框中显示的组件没有对话框参考,我也不知道从组件中自我关闭对话框的任何其他方法。

有没有办法从对话框内的组件中关闭对话框?

3 个答案:

答案 0 :(得分:41)

如果你想从对话框中关闭它:

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

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

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

constructor(private matDialog: MatDialog){}

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

答案 1 :(得分:1)

以下内容对我来说很好

this.matDialog.closeAll();

答案 2 :(得分:0)

如接受的答案所述

this.dialogRef.close();

关闭对话框。但大多数情况下,我们希望立即呈现来自服务器的响应,而无需刷新页面。为此,我们将响应作为参数传递给 close 方法,如下所示

this.dialogRef.close(response);

如果你这样做,你不需要做在文档中找到的事件发射器方法

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

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