角度材质对话框返回值答案

【问题标题】：Angular Material Dialog return value角度材质对话框返回值
【发布时间】：2018-04-01 15:55:48
【问题描述】：

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

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

  ngOnInit() {}
}

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

【问题讨论】：

标签： angular dialog angular-material2

【解决方案1】：

如果有人感兴趣，我找到了一个解决方案（不确定它是否是最好的）。只需禁用默认关闭操作，这样弹出窗口就不会在后台点击时关闭，而在后台点击时使用数据参数关闭它。

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

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

【讨论】：

您还应该订阅键盘事件来处理esc 键。我浏览了源代码，并没有真正看到更好的方法来做到这一点。幸运的是，背景点击和esc keydown 事件是唯一需要重新实现以实现相同功能的两件事。
你在哪里设置dataToReturn对象？
就在 matDialogRef.close(dataToReturn);线。请记住，订阅是在创建对话框时进行的（通常您会返回一个当时未知的值），因此设置返回值应该在 lambda function result => { let dataToReturn = .. .; matDialogRef.close(dataToReturn); })

【解决方案2】：

调用beforeClosed()中的close(dataToReturn)设置对话结果：

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

如果通过单击背景或按 ESC 关闭对话框，这将起作用。

【讨论】：

这是 Angular Material 7+ 中的正确解决方案（也可能是较低版本，不确定）。您还可以通过传递给订阅方法的第一个参数来获取用户是否单击是、否或只是转义（mat-dialog-close）：matDialogRef.beforeClose().subscribe((value) => matDialogRef.close(this.dataToReturn)); }
这应该是被接受的答案。顺便说一句：错字，应该是 beforeClosed
这是正确的解决方案（Y）

【解决方案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!");
        }
    });

【讨论】：

【解决方案4】：

如果没有提供其他值，这是一个返回默认值的解决方案。适用于背景和 Esc 点击：

constructor(public dialogRef: MatDialogRef<DialogComponent>) {
    // return 'Cancel' when backdrop or 'Esc' clicked
    dialogRef.beforeClosed().subscribe(
       result => dialogRef.close(result ?? DialogResult.Cancel));
 }
    
  onYesClicked() {
    this.closeDialog(DialogResult.Yes);
  }

  onNoClicked() {
    this.closeDialog(DialogResult.No);
  }

  private closeDialog(result: DialogResult) {
    this.dialogRef.close(result);
  }

 export enum DialogResult {
   Cancel = -1,
   No = 0,
   Yes = 1,
 }

【讨论】：