Angular页面加载时mat-dialog打开两次，ngOnInit触发两次求助

核心问题分析 #

ngOnInit触发两次通常有以下几种原因：

• 组件在路由配置或父组件模板中被多次实例化（比如路由重复加载、模板里多次写了组件选择器）
• Angular开发模式下的双重变更检测（生产模式会自动关闭该机制）
• 异步逻辑处理不当导致的意外重复执行

分步解决方案 #

1. 先排查组件重复实例化问题 #

这是最常见的根源，优先检查：

• 查看路由配置文件，确认该组件没有被多个路由条目引用，或懒加载/路由守卫导致的重复加载
• 检查父组件模板，确保没有多次使用该组件的选择器（比如<app-your-component></app-your-component>出现多次）

2. 代码层面添加防重复逻辑 #

即使ngOnInit触发多次，通过标志位确保对话框只打开一次，同时优化异步逻辑避免内存泄漏：

修改后的组件代码：

import { takeWhile } from 'rxjs/operators';
// ...其他导入

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, OnDestroy {
  private dialogOpened = false;
  private startVSubscription: Subscription;
  // ...其他属性

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

    // 优化定时器逻辑：用takeWhile自动管理订阅，无需手动判断unsubscribe
    const staring = timer(500, 10000);
    this.startVSubscription = staring.pipe(
      takeWhile(() => !this.isLoad)
    ).subscribe(() => {
      this.PStartV();
    });

    // 仅在对话框未打开时执行打开操作
    if (!this.dialogOpened) {
      this.cmdOpenDialog_click();
      this.dialogOpened = true;
    }
  }

  cmdOpenDialog_click() {
    this.dialog.open(DialogInternalNotesThreeComponent, {
      data: {
        data: this.internalNotes
      }
    });
  }

  // 组件销毁时取消所有订阅，避免内存泄漏
  ngOnDestroy() {
    if (this.startVSubscription) {
      this.startVSubscription.unsubscribe();
    }
  }
}

3. 针对开发模式双重检测的补充说明 #

Angular开发模式下会运行两次变更检测来检测副作用，这是框架的默认行为，生产模式下会自动禁用。如果排查后确认是这个原因，上述标志位方案已经可以解决开发环境的重复弹窗问题，生产环境无需额外处理。

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