Angular Material：页面加载时mat-dialog重复打开问题排查

问题原因 #

你当前的检查逻辑if (!this.dialog)完全无效，因为this.dialog是注入的MatDialog服务实例，永远不会为null，所以每次调用cmdOpenDialog_OnInit都会直接打开新对话框，导致重复弹出。

正确解决方案 #

要实现"仅打开一次"的需求，需要用MatDialogRef保存已打开的对话框实例，通过检查这个实例的状态来判断是否需要打开新对话框：

• 在组件类中定义变量存储对话框实例
• 打开对话框时保存MatDialogRef实例
• 检查对话框是否已打开（实例存在且未关闭）
• 对话框关闭后清理实例，避免内存泄漏

修改后的完整代码 #

import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { DialogInternalNotesThreeComponent } from './path-to-your-dialog-component'; // 替换为你的组件实际路径

// ... 其他导入和组件定义

export class YourComponent {
  // 定义变量存储对话框实例，初始为null
  private dialogRef: MatDialogRef<DialogInternalNotesThreeComponent> | null = null;
  isLoad = false;
  startVSubscription: any;

  constructor(private dialog: MatDialog) {} // 确保已正确注入MatDialog服务

  ngOnInit() {
    sessionStorage.setItem('InActiveV', "false");

    const staring = timer(500, 10000);
    this.startVSubscription = staring.subscribe(val => {
      if (!this.isLoad) {
        this.PStartV();
      } else {
        this.startVSubscription.unsubscribe();
      }
    });

    // 初始化时调用打开对话框方法
    this.cmdOpenDialog_OnInit();
  }

  cmdOpenDialog_OnInit() {
    // 清理已关闭的对话框实例
    if (this.dialogRef && !this.dialogRef.componentInstance) {
      this.dialogRef = null;
    }

    // 只有当对话框未打开时，才创建新对话框
    if (!this.dialogRef) {
      this.dialogRef = this.dialog.open(DialogInternalNotesThreeComponent, {
        data: {
          data: this.internalNotes
        }
      });

      // 对话框关闭后重置实例，确保下次可正常打开
      this.dialogRef.afterClosed().subscribe(() => {
        this.dialogRef = null;
      });
    }
  }

  // ... 你的其他业务方法（比如PStartV）
}

关键说明 #

• dialogRef变量用来追踪当前打开的对话框实例，初始为null
• 调用dialog.open()时，会返回一个MatDialogRef实例，将其赋值给dialogRef即可追踪对话框状态
• 每次打开前检查dialogRef是否存在：如果不存在，才创建新对话框
• 通过afterClosed()订阅对话框关闭事件，将dialogRef重置为null，避免内存泄漏同时保证后续可正常触发打开逻辑

这样就能确保页面加载时对话框只打开一次，不会出现重复弹出的问题。

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