如何在Material MatDialog中动态加载组件？求实现示例

没问题，我给你整一个极简的示例，完全匹配你的需求——把组件Type传入MatDialog的配置数据里，让对话框动态实例化这个组件并嵌入到mat-dialog-content区域里。核心确实要用到ViewContainerRef和组件工厂来实现动态组件加载，下面一步步来：

1. 先写一个要动态加载的测试组件 #

比如我们创建一个TestDynamicComponent，就是个简单的展示组件：

// test-dynamic.component.ts
import { Component } from '@angular/core';

@Component({
  template: `
    <div style="padding: 20px;">
      <h3>我是动态加载的组件！</h3>
      <p>这里可以放任意自定义内容~</p>
    </div>
  `
})
export class TestDynamicComponent {}

2. 创建通用的动态对话框组件 #

这个组件是MatDialog要打开的容器，它会接收传入的组件Type，然后动态加载到指定区域：

// dynamic-dialog.component.ts
import { Component, Inject, ViewChild, ViewContainerRef } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  template: `
    <h2 mat-dialog-title>动态组件对话框</h2>
    <mat-dialog-content>
      <!-- 动态组件的挂载点 -->
      <ng-template #dynamicComponentHost></ng-template>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-button (click)="dialogRef.close()">关闭</button>
    </mat-dialog-actions>
  `
})
export class DynamicDialogComponent {
  // 获取挂载点的ViewContainerRef，用来承载动态组件
  @ViewChild('dynamicComponentHost', { read: ViewContainerRef }) host!: ViewContainerRef;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: { componentType: any },
    public dialogRef: MatDialogRef<DynamicDialogComponent>
  ) {}

  ngOnInit() {
    this.loadDynamicComponent();
  }

  private loadDynamicComponent() {
    // 先清空挂载点，避免重复加载
    this.host.clear();
    // Angular 13+ 可以直接用createComponent传入组件Type，无需ComponentFactoryResolver
    const componentRef = this.host.createComponent(this.data.componentType);
    
    // 如果需要给动态组件传数据，在这里给组件实例赋值即可：
    // componentRef.instance.someProperty = this.data.componentData;
  }
}

3. 模块配置（关键！） #

别忘了在你的NgModule里声明这些组件，确保Angular能识别它们：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import { DynamicDialogComponent } from './dynamic-dialog.component';
import { TestDynamicComponent } from './test-dynamic.component';

@NgModule({
  declarations: [
    AppComponent,
    DynamicDialogComponent,
    TestDynamicComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDialogModule,
    MatButtonModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. 调用示例（在父组件中打开对话框） #

比如在AppComponent里，点击按钮触发对话框，传入动态组件的Type：

// app.component.ts
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DynamicDialogComponent } from './dynamic-dialog.component';
import { TestDynamicComponent } from './test-dynamic.component';

@Component({
  template: `
    <button mat-raised-button (click)="openDynamicDialog()">打开动态组件对话框</button>
  `
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openDynamicDialog() {
    this.dialog.open(DynamicDialogComponent, {
      width: '400px',
      data: {
        // 把组件Type传入对话框的配置数据中
        componentType: TestDynamicComponent
        // 如果要传数据给动态组件，可以加个字段：
        // componentData: { title: '自定义标题' }
      }
    });
  }
}

额外小提示 #

如果你的Angular版本低于13，需要引入ComponentFactoryResolver来创建组件工厂，替换loadDynamicComponent里的代码：

import { ComponentFactoryResolver } from '@angular/core';

// 在构造函数注入resolver
constructor(
  @Inject(MAT_DIALOG_DATA) public data: { componentType: any },
  public dialogRef: MatDialogRef<DynamicDialogComponent>,
  private resolver: ComponentFactoryResolver
) {}

private loadDynamicComponent() {
  this.host.clear();
  const factory = this.resolver.resolveComponentFactory(this.data.componentType);
  const componentRef = this.host.createComponent(factory);
}

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