Question

我有一个以下对话框组件（我在另一个组件中使用dialog.open（MyDialogComponent）打开）。

export class MyDialogComponent implements OnInit {
  constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {}

  ngOnInit() {}
}

我知道我可以通过执行绑定到对话框组件中按钮的matDialogRef.close（dataToReturn）将任何数据返回给调用组件。但是，如果用户点击其他地方而不是弹出窗口关闭它，我怎么能返回数据？

Answer 1

如果有人有兴趣我找到了解决方案（不确定它是否是最好的解决方案）。只是禁用默认关闭操作，以便弹出窗口不会在背景点击时关闭，而在背景点击时使用数据参数关闭它。

matDialogRef.disableClose = true;//disable default close operation
matDialogRef.backdropClick().subscribe(result => {
  matDialogRef.close(dataToReturn);
});

这样，无论对话框是按钮关闭还是点击其他地方，调用组件都会接收数据。

Answer 2

调用close(dataToReturn)中的beforeClose()来设置对话框结果：

constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {
    matDialogRef.beforeClose().subscribe(() => matDialogRef.close(this.dataToReturn));
}

如果通过单击背景或单击 ESC 关闭对话框，则此方法将起作用。

Answer 3

    //In dialog component.
    dataYouWantToReturn = true; //set data.

    this.dialogRef.close(dataYouWantToReturn); 

    //In component calling the dialog component.
    dialogRef.afterClosed().subscribe(result => {
        if (result) {
            console.log("Result is TRUE!");
        }
    });

角度材质对话框返回值

3 个答案: