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);

Answer 2

我目前使用的方式是在关闭时从对话框传递字符串，如：

this.dialogRef.close('A or B or whatever');

我在外面使用它们：

  dialogRef.afterClosed().subscribe((result: any) => {
    if (resuld === 'A'){
      // if close button was clicked do action A
    } else if (resuld === 'B') {
      // if other button was clicked do action B
    }
 })

角度材料对话框 - ＆gt; afterClosed - ＆gt;按下了哪个按钮

2 个答案: