Angular：如何在Dialog组件中动态渲染指定组件？

要打造可承载任意组件的通用对话框容器，按以下步骤修改代码即可：

1. 完善DialogComponent的动态组件渲染逻辑 #

给DialogComponent添加必要依赖注入，通过ViewContainerRef定位模板中的容器，再用ComponentFactoryResolver创建并加载目标组件：

import { Component, Inject, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {
  // 获取模板中标记的容器引用
  @ViewChild('container', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;

  constructor(
    @Inject(MAT_DIALOG_DATA) public dialogData: any,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit(): void {
    this.renderDynamicComponent();
  }

  private renderDynamicComponent(): void {
    // 未传入组件则直接返回
    if (!this.dialogData.componentToRender) return;

    // 清空容器，避免重复渲染
    this.container.clear();

    // 创建组件工厂并实例化组件
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.dialogData.componentToRender);
    const componentRef = this.container.createComponent(componentFactory);

    // 可选：给动态组件传递额外数据
    if (this.dialogData.componentData) {
      Object.assign(componentRef.instance, this.dialogData.componentData);
    }
  }
}

2. 修改DialogComponent模板 #

给<ng-container>添加模板引用标记，让代码精准定位渲染位置：

<div class="dialog">
  <ng-container #container></ng-container>
</div>

3. 声明动态组件（关键） #

• 若使用Angular 9+ 非独立组件：把所有可能动态渲染的组件添加到对应模块的entryComponents数组中（新版本Angular会自动检测，但手动添加更保险）。
• 若使用独立组件：确保目标组件标记了standalone: true，且自身依赖的模块已导入。

4. 调用示例 #

直接传入组件引用，还能附带组件所需的数据：

// 导入要渲染的目标组件
import { UserFormComponent } from './user-form/user-form.component';

// ...

// 组装对话框数据
const dialogData = {
  componentToRender: UserFormComponent,
  componentData: { // 可选：传递给UserFormComponent的参数
    userId: 123,
    mode: 'edit'
  }
};

// 打开对话框
this.dialogService.openDialog(dialogData);

额外说明 #

对话框关闭时，Angular会自动销毁动态创建的组件，无需手动清理。如果动态组件有特殊销毁逻辑，可在组件自身的ngOnDestroy中处理。

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