Angular Dialog如何根据弹窗状态实现按钮切换打开/关闭功能

你现有代码的核心问题有两个：

1. toggleDialog方法仅实现了打开逻辑，没有判断弹窗当前打开状态的分支
2. 构造函数中注入的MatDialogRef<DialogComponent>是当前组件上下文关联的弹窗实例，并非你动态打开的指定ID弹窗实例，之前调用相关方法拿错了操作对象，自然会出现功能异常。

直接使用MatDialog自带的实例查询方法即可实现需求，不需要额外维护自定义状态变量，也不会出现状态不同步问题，完整实现代码如下：

export class DialogButton {
  // 统一定义弹窗ID，和打开配置保持一致
  private readonly TARGET_DIALOG_ID = 'legend-button-dialog-container';

  // 移除构造函数中不必要的MatDialogRef注入
  constructor(public dialog: MatDialog) { }

  toggleDialog() {
    // 按ID查询已打开的目标弹窗实例
    const openedDialog = this.dialog.getDialogById(this.TARGET_DIALOG_ID);
    
    if (openedDialog) {
      // 弹窗已打开时，直接调用close方法关闭
      openedDialog.close();
      return;
    }

    // 弹窗未打开时执行原有打开逻辑
    this.dialog.open(DialogComponent, {
      id: this.TARGET_DIALOG_ID,
      disableClose: false,
      hasBackdrop: false,
    });
  }
}

关键说明 #

• 不要在触发弹窗的宿主组件（也就是DialogButton所在组件）构造函数里提前注入MatDialogRef：该注入方式只能获取到当前组件本身作为弹窗内容时的关联实例，在普通页面组件中注入甚至会直接抛出找不到依赖的错误
• 不需要手动维护isDialogOpen这类自定义状态变量：直接通过MatDialog内置接口查询实例状态，可以自动兼容弹窗自带关闭按钮、点击空白区域关闭等场景，避免自定义状态和实际弹窗状态不同步的bug
• 该实现完全兼容你配置的无遮罩（hasBackdrop: false）模式，不会影响弹窗打开状态下和页面其他元素的交互逻辑

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