Angular Material Dialog -> afterClosed -> 按下了哪个按钮

Question

我在我的应用程序和 Angular Material 对话框中使用了 Angular Material。关闭对话框后，应根据单击的按钮执行操作 A 或操作 B：

dialogRef.afterClosed().subscribe(() => {
    // if close button was clicked do action A
    // if other button was clicked do action B
 })

是否有可能检测在 afterClosed 方法中单击了哪个按钮？

Answer 1

您可以关闭带有自定义数据的对话框。像这样：

在您的对话框组件中：

@Component({/* ... */})
export class YourDialog {
  constructor(public dialogRef: MatDialogRef<YourDialog>) { }


  closeA() {
    this.closeDialog('A')
  }

  closeB() {
    this.closeDialog('B');
  }

  closeDialog(button: 'A' | 'B') {
    this.dialogRef.close(button);
  }
}

像这样处理关闭：

dialogRef.afterClosed().subscribe(result => {
  if (result === 'A') {
    // handle A button close
  }

  if (result === 'B')
    // handle B button close
  }
});

由于afterClosed()是一个可观察对象，您可以过滤此流以创建更具声明性的解决方案：

const closedA$ = dialogRef.afterClosed().pipe(filter(result => result === 'A'));
const closedB$ = dialogRef.afterClosed().pipe(filter(result => result === 'B'));

closedA$.subscribe( // handle A);
closedB$.subscribe( // handle B);