Angular 16+动态导入组件至MatDialog时MatDialogRef注入失败问题

错误根源 #

你的代码存在两个核心问题：

1. 冗余的组件实例创建：手动调用createComponent生成的组件实例完全没用，MatDialog.open会重新创建一个TestComponent实例，但这个新实例没有关联你创建的TestModule注入器。
2. 丢失Dialog上下文依赖：MatDialogRef是MatDialog在打开组件时专属注入的服务，只有由MatDialog负责实例化的组件才能获取到这个依赖。你手动创建组件的操作脱离了Dialog的上下文，同时重新创建的实例也没用到正确的模块注入器，导致依赖全部失效。

修正后的代码 #

直接让MatDialog负责组件实例化，并关联动态导入的模块注入器即可：

import { Component, inject, Injector, createNgModule } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
    selector: 'app-testA',
    templateUrl: './testA.component.html',
    styleUrls: ['./testA.component.scss'],
})
export class TestAComponent {
    private injector = inject(Injector);
    private dialog = inject(MatDialog);

    async open() {
        // 动态导入模块并创建模块引用
        const { TestModule } = await import('./testB.module');
        const moduleRef = createNgModule(TestModule, this.injector);

        // 动态导入组件
        const { TestComponent } = await import('./testB.component');

        // 让MatDialog打开组件，并传入模块的环境注入器
        this.dialog.open(TestComponent, {
            environmentInjector: moduleRef.injector,
            // 可选：添加其他Dialog配置，比如width、data等
            width: '600px'
        });
    }
}

额外注意事项 #

• 确保TestModule中正确声明并导出TestComponent：

  @NgModule({
    declarations: [TestComponent],
    exports: [TestComponent] // 可选，但如果模块要共享组件则需要
  })
  export class TestModule {}
  

• 如果TestComponent不需要依赖整个TestModule的服务，也可以直接在Dialog配置中导入所需提供者，简化代码：

  async open() {
    const { TestComponent } = await import('./testB.component');
    this.dialog.open(TestComponent, {
      providers: [
        // 在这里添加TestComponent需要的服务提供者
      ]
    });
  }
  

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