Angular Material模态框二次渲染时ngOnInit未执行的问题排查

问题场景 #

我基于Angular Material实现了点击按钮触发的模态框，组件代码如下：

export class SavedSearchesModalComponent implements OnInit, OnDestroy {
 constructor() {
     console.log('constructor');
 }
 ngOnInit() {
         console.log('On init');
     }
 ngOnDestroy() {
         console.log('On destroy');
     }
}

首次打开模态框时控制台正常输出constructor和On init，但跳转到其他路由后返回包含触发按钮的组件，再次打开模态框时，仅输出constructor，ngOnInit未触发，不符合预期。

我曾尝试通过手动触发变更检测解决，但认为这种干预生命周期的方式属于不良实践：

constructor(private readonly cdr: ChangeDetectorRef) {
    setTimeout(() => this.cdr.detectChanges(), 0);
    console.log('constructor');
}

根本原因 #

路由跳转时，模态框实例未被正确销毁或清理，导致再次打开时，组件实例虽被创建，但Angular的生命周期钩子未正常触发。Angular Material的MatDialog不会在宿主组件路由销毁时自动关闭已打开的对话框，残留实例会干扰后续组件的初始化流程。

正确解决方案 #

在包含触发按钮的宿主组件中，管理模态框的引用，并在宿主组件销毁时主动关闭对话框，确保每次打开模态框都是全新实例且生命周期正常执行：

import { Component, OnDestroy } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { SavedSearchesModalComponent } from './saved-searches-modal.component';

@Component({
  // 宿主组件元数据
})
export class HostComponent implements OnDestroy {
  private dialogRef: MatDialogRef<SavedSearchesModalComponent> | null = null;

  constructor(private dialog: MatDialog) {}

  openSavedSearchesModal() {
    // 每次打开创建全新对话框实例
    this.dialogRef = this.dialog.open(SavedSearchesModalComponent);
    
    // 对话框关闭后清空引用
    this.dialogRef.afterClosed().subscribe(() => {
      this.dialogRef = null;
    });
  }

  ngOnDestroy() {
    // 宿主组件销毁时强制关闭对话框
    if (this.dialogRef) {
      this.dialogRef.close();
    }
  }
}

额外检查点 #

• 确认模态框组件未设置ChangeDetectionStrategy.OnPush变更检测策略（除非你明确需要并已正确处理相关逻辑），否则可能导致钩子触发异常。
• 检查打开模态框时的配置项，避免使用会阻止组件初始化的特殊设置。

内容的提问来源于stack exchange，提问作者Andrés Ucero