如何向Angular Material对话框内容中传入自定义组件

1. 调整弹窗数据类型定义 #

首先修改ModalDialogData类型，让description字段支持接收组件类：

// modal-container.model.ts
import { Type } from '@angular/core';

export interface ModalDialogData {
  title: string;
  description: Type<any>; // 支持接收任意组件类
  buttonClose: string;
  // 可选：如果需要给传入的自定义组件传参，可扩展该字段
  componentProps?: Record<string, any>;
}

注意：Angular 13以下版本需要把所有要动态传入的自定义组件，添加到ModalComponent所在模块（或调用弹窗的模块）的entryComponents数组中；Angular 13+版本无需额外配置，只要确保自定义组件已经在对应模块的declarations（跨模块使用需加exports）中声明即可。

2. 修改弹窗组件TS逻辑 #

你现有代码中@ViewChild的类型定义有误，需要获取DynamicLoaderDirective实例拿到暴露的ViewContainerRef，在视图初始化完成后动态创建组件，同时记得销毁组件避免内存泄漏：

import { Component, Inject, ViewEncapsulation, ViewChild, AfterViewInit, OnDestroy, ComponentRef } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ModalDialogData } from './modal-container.model';
import { DynamicLoaderDirective } from './dynamic-loader.directive'; // 替换为你实际的指令路径
import { Subscription } from 'rxjs';

@Component({
  selector: `[modal-component]`,
  templateUrl: './modal-container.component.html',
  styleUrls: ['./modal-container.component.scss'],
})
export class ModalComponent implements AfterViewInit, OnDestroy {
  // 直接查询动态加载指令实例，不需要查询TemplateRef
  @ViewChild(DynamicLoaderDirective, { static: true }) dynamicLoader!: DynamicLoaderDirective;
  private componentRef!: ComponentRef<any>;
  private subscriptions: Subscription[] = [];

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: ModalDialogData,
    private dialogRef: MatDialogRef<ModalComponent> // 注入弹窗引用用于关闭操作
  ) {}

  ngAfterViewInit(): void {
    this.loadCustomComponent();
  }

  private loadCustomComponent(): void {
    const viewContainerRef = this.dynamicLoader.viewContainerRef;
    // 清空容器旧内容
    viewContainerRef.clear();

    // 动态创建传入的组件
    this.componentRef = viewContainerRef.createComponent(this.data.description);

    // 存在传参时给组件实例赋值
    if (this.data.componentProps) {
      Object.entries(this.data.componentProps).forEach(([key, value]) => {
        this.componentRef.instance[key] = value;
      });
      // 手动触发变更检测，避免传值后视图不更新
      this.componentRef.changeDetectorRef.detectChanges();
    }

    // 可选：订阅动态组件的Output事件，比如组件触发close事件时关闭弹窗
    if (this.componentRef.instance.close) {
      const sub = this.componentRef.instance.close.subscribe(() => {
        this.dialogRef.close();
      });
      this.subscriptions.push(sub);
    }
  }

  ngOnDestroy(): void {
    // 销毁动态组件、取消订阅，防止内存泄漏
    if (this.componentRef) {
      this.componentRef.destroy();
    }
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

如果需要兼容Angular 12及以下版本，创建组件前需要注入ComponentFactoryResolver解析组件工厂：

// 构造函数增加注入private resolver: ComponentFactoryResolver
const componentFactory = this.resolver.resolveComponentFactory(this.data.description);
this.componentRef = viewContainerRef.createComponent(componentFactory);

3. 调整弹窗模板 #

现有模板中的ng-template作为动态组件渲染锚点即可，多余的模板变量可以删除：

<div class="modal-header">
  <h4 mat-dialog-title>{{ data?.title }}</h4>
  <span class="close" [mat-dialog-close]="false"></span>
</div>

<div mat-dialog-content class="modal-body">
  <ng-template dynamicLoader></ng-template>
</div>

4. 调用弹窗时传入自定义组件 #

在openModal方法中直接传入要渲染的组件类即可，需要传参时追加componentProps配置：

// 引入你要渲染的自定义组件
import { UserProfileComponent } from './user-profile/user-profile.component';

public openModal(){
  this.dialog.open(ModalComponent, {
    autoFocus: false,
    panelClass: ['full-screen-modal'],
    data: {
      title: this.title,
      description: UserProfileComponent, // 直接传入组件类
      buttonClose: this.buttonName,
      // 给自定义组件的@Input属性传值
      componentProps: {
        userId: 1001,
        editable: false
      }
    },
  });
}

补充说明 #

• 动态加载的组件内部可以直接注入MatDialogRef调用close方法关闭弹窗，不需要额外传参
• 如果需要渲染的是TemplateRef模板而不是组件，只需要把逻辑换成viewContainerRef.createEmbeddedView(templateRef)即可

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