Angular Material Dialog在canActivate/APP_INITIALIZER中无法接收MAT_DIALOG_DATA

问题原因 #

1. canActivate场景：路由守卫执行时机早于组件初始化流程，直接调用MatDialog.open时，默认注入器未关联当前路由的上下文，导致弹窗组件无法获取MAT_DIALOG_DATA。
2. APP_INITIALIZER场景：应用初始化阶段（APP_INITIALIZER执行时），Angular的Overlay容器尚未完成初始化，此时操作弹窗会破坏依赖注入上下文，手动创建注入器也因缺少必要初始化依赖而失败。

可行解决办法 #

方案1：修正canActivate中的弹窗调用 #

在路由守卫中调用弹窗时，显式传入当前路由的注入器，确保弹窗组件能正确获取数据：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';

@Injectable({ providedIn: 'root' })
export class ParamGuard implements CanActivate {
  constructor(private dialog: MatDialog) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    const requiredParam = route.queryParamMap.get('requiredParam');
    if (!requiredParam) {
      this.dialog.open(DialogComponent, {
        data: { message: '请传入必要的查询参数' },
        injector: route.injector // 关键：绑定当前路由的注入器
      });
      return false;
    }
    return true;
  }
}

方案2：APP_INITIALIZER延后弹窗逻辑 #

如果必须在应用启动时执行参数检查，不要直接在APP_INITIALIZER中打开弹窗，改为先记录状态，待应用初始化完成后再触发弹窗：

1. 创建初始化服务，负责检查参数并保存状态：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AppInitService {
  isParamMissing = false;

  constructor(private router: Router) {}

  init(): Promise<void> {
    const urlTree = this.router.parseUrl(this.router.url);
    this.isParamMissing = !urlTree.queryParamMap.get('requiredParam');
    return Promise.resolve();
  }
}

2. 在模块中配置APP_INITIALIZER：

import { APP_INITIALIZER } from '@angular/core';
import { AppInitService } from './app-init.service';

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (initService: AppInitService) => () => initService.init(),
      deps: [AppInitService],
      multi: true
    }
  ]
})
export class AppModule {}

3. 在AppComponent的初始化钩子中触发弹窗：

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AppInitService } from './app-init.service';
import { DialogComponent } from './dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(
    private dialog: MatDialog,
    private appInitService: AppInitService
  ) {}

  ngOnInit(): void {
    if (this.appInitService.isParamMissing) {
      this.dialog.open(DialogComponent, {
        data: { message: '启动参数缺失，请检查' }
      });
    }
  }
}

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