Angular如何渲染列表形式多个动态组件并绑定输入输出

实现步骤 #

1. 调整列表模板结构 #

不要在循环中写无标记的模板节点，给每个动态容器添加模板引用变量，配合循环逻辑生成一一对应的视图容器：

<ol>
  <li *ngFor="let item of componentConfigs; let i = index">
    <ng-template #dynamicContainer></ng-template>
  </li>
</ol>

注意：Angular 17及以上版本可以直接用@for语法替代*ngFor，核心逻辑完全一致。

2. 组件类中实现动态渲染、绑定逻辑 #

通过@ViewChildren获取循环生成的所有容器实例，等视图初始化完成后统一执行渲染，同时做好实例的存储和销毁逻辑，避免内存泄漏：

import { Component, ViewChildren, ViewContainerRef, QueryList, AfterViewInit, OnDestroy } from '@angular/core';
// 提前导入所有需要动态渲染的业务组件
import { AlertComponent } from './alert.component';
import { FormComponent } from './form.component';

@Component({
  selector: 'app-dynamic-list',
  templateUrl: './dynamic-list.component.html'
})
export class DynamicListComponent implements AfterViewInit, OnDestroy {
  // 组件配置列表：每一项存储组件类型、输入参数、输出事件回调
  componentConfigs = [
    {
      type: 'alert',
      inputs: { message: '第一条提示', type: 'warning' },
      outputs: { closed: () => this.removeComponent(0) }
    },
    {
      type: 'form',
      inputs: { label: '用户输入项', defaultVal: '' },
      outputs: { valueChanged: (val) => this.updateList(val, 1) }
    }
  ];

  // 组件类型映射表，key和配置中的type字段一一对应
  private componentMap = {
    alert: AlertComponent,
    form: FormComponent
  };

  // 获取所有动态容器实例
  @ViewChildren('dynamicContainer', { read: ViewContainerRef })
  containers!: QueryList<ViewContainerRef>;

  // 存储所有生成的组件引用，用于后续更新、销毁操作
  private componentRefs: any[] = [];

  ngAfterViewInit() {
    this.renderAllComponents();
    // 监听配置列表的增删变化，自动重渲染组件
    this.containers.changes.subscribe(() => {
      this.clearAllComponents();
      this.renderAllComponents();
    });
  }

  // 批量渲染所有动态组件
  private renderAllComponents() {
    this.containers.forEach((container, index) => {
      const config = this.componentConfigs[index];
      if (!config) return;
      // 清空当前容器的旧内容
      container.clear();
      // 匹配要渲染的组件类
      const componentClass = this.componentMap[config.type as keyof typeof this.componentMap];
      // 创建组件实例
      const componentRef = container.createComponent(componentClass);
      
      // 绑定所有@Input属性
      Object.entries(config.inputs).forEach(([key, value]) => {
        (componentRef.instance as any)[key] = value;
      });

      // 绑定所有@Output事件
      Object.entries(config.outputs).forEach(([key, handler]) => {
        (componentRef.instance as any)[key].subscribe(handler);
      });

      this.componentRefs.push(componentRef);
    });
  }

  // 清空所有已生成的动态组件
  private clearAllComponents() {
    this.componentRefs.forEach(ref => ref.destroy());
    this.componentRefs = [];
  }

  // 示例：删除指定位置的组件
  removeComponent(index: number) {
    this.componentConfigs.splice(index, 1);
  }

  // 示例：组件内部输入变化时更新列表数据
  updateList(newVal: string, index: number) {
    this.componentConfigs[index].inputs.defaultVal = newVal;
    // 此处可扩展自定义列表更新逻辑
  }

  ngOnDestroy() {
    this.clearAllComponents();
  }
}

3. 注意事项 #

• Angular 13及以上版本不需要注入ComponentFactoryResolver，createComponent方法可直接接收组件类作为参数；13以下的老版本才需要先通过resolver解析组件工厂再创建实例。
• Angular 13以下版本使用动态组件，需要提前将组件声明在所属NgModule的entryComponents数组中，启用Ivy引擎的高版本不需要该配置，直接导入组件类即可。
• 如果需要在运行时更新动态组件的输入值，不需要重新创建组件，直接修改组件实例对应属性的值即可；复杂场景可以将输入封装为可观察对象，实现数据变更的实时推送。
• 所有动态生成的组件实例，必须在列表项删除、宿主组件销毁时手动调用destroy()方法，避免内存泄漏。

该方案下只需要维护componentConfigs配置列表即可，不需要写大量*ngIf条件判断，新增组件类型只需要在组件映射表里加一条对应记录，可维护性远高于硬编码条件判断的实现方式。

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