Angular Material Dialog：如何在afterClosed中判断点击的按钮

当然可以做到！Angular Material的MatDialogRef的afterClosed()方法其实会返回一个Observable，它会在对话框关闭时发出你在对话框组件里主动传递的值——这正是用来区分点击了哪个按钮的关键。

具体实现步骤： #

1. 在对话框组件中，给不同按钮绑定关闭逻辑并传递标识

当用户点击对话框内的不同按钮时，调用dialogRef.close()并传入不同的标识（比如字符串、枚举或对象），用来标记点击的按钮类型：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-custom-dialog',
  template: `
    <h3>操作确认</h3>
    <div class="dialog-actions">
      <!-- 关闭/取消按钮 -->
      <button mat-button (click)="handleCancel()">取消</button>
      <!-- 执行动作B的按钮 -->
      <button mat-button color="primary" (click)="handleConfirm()">确认</button>
    </div>
  `
})
export class CustomDialogComponent {
  constructor(private dialogRef: MatDialogRef<CustomDialogComponent>) {}

  handleCancel() {
    // 点击取消/关闭按钮时，传递标识'cancel'
    this.dialogRef.close('cancel');
  }

  handleConfirm() {
    // 点击确认按钮时，传递标识'confirm'
    this.dialogRef.close('confirm');
  }
}

2. 在主组件中订阅afterClosed()并判断结果

在你打开对话框的地方，订阅afterClosed()返回的Observable，根据收到的标识执行对应的动作：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { CustomDialogComponent } from './custom-dialog.component';

@Component({
  selector: 'app-main',
  template: `<button mat-button (click)="openDialog()">打开对话框</button>`
})
export class MainComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(CustomDialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      if (result === 'cancel') {
        // 点击关闭/取消按钮，执行动作A
        console.log('执行动作A');
        // 这里写你的动作A逻辑
      } else if (result === 'confirm') {
        // 点击确认按钮，执行动作B
        console.log('执行动作B');
        // 这里写你的动作B逻辑
      } else {
        // 处理用户点击对话框外部或按ESC关闭的情况（result为undefined）
        console.log('对话框被强制关闭');
        // 可根据需求决定是否执行动作A或其他逻辑
      }
    });
  }
}

额外提示： #

• 你不仅可以传递简单的字符串标识，还可以传递复杂对象，比如如果需要从对话框带回数据，就可以这样写：this.dialogRef.close({ action: 'confirm', data: formValue })，然后在订阅时解构这个对象。
• 如果你的对话框有多个按钮，只需要给每个按钮的close()方法传递不同的标识即可，扩展性很强。

内容的提问来源于stack exchange，提问作者quma