Angular中如何动态创建同一组件的多个实例？

当然可以实现！你提到用ComponentFactory没成功，大概率是某个步骤没做对，我来一步步给你捋清楚正确的实现方式：

核心逻辑与步骤 #

要动态创建组件实例，核心是借助ComponentFactoryResolver解析组件工厂，再通过ViewContainerRef作为挂载容器来生成实例。这两个是实现的关键，我把完整流程拆成几个清晰的步骤：

1. 定义动态组件的挂载容器：在父组件模板里用<ng-template>标记出容器，后续通过ViewChild获取它的ViewContainerRef引用。
2. 注入必要服务：在父组件中注入ComponentFactoryResolver，用来解析目标组件生成工厂类。
3. 创建并管理组件实例：通过工厂类创建组件，挂载到容器中，同时可以设置输入属性、监听输出事件，还要记得保存实例引用方便后续操作。

完整代码示例 #

假设我们要重复创建的是DynamicCardComponent，下面是完整的实现代码：

父组件模板（parent.component.html） #

<button (click)="addNewCard()">添加新卡片</button>
<!-- 动态组件的挂载容器 -->
<ng-template #cardContainer></ng-template>

父组件类（parent.component.ts） #

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicCardComponent } from './dynamic-card.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  // 获取模板中的容器引用，必须指定read: ViewContainerRef
  @ViewChild('cardContainer', { read: ViewContainerRef }) cardContainer!: ViewContainerRef;
  // 保存所有动态创建的组件实例，方便后续销毁或更新
  private cardInstances: DynamicCardComponent[] = [];

  constructor(private resolver: ComponentFactoryResolver) {}

  addNewCard(): void {
    // 1. 解析目标组件，生成组件工厂
    const cardFactory = this.resolver.resolveComponentFactory(DynamicCardComponent);
    // 2. 在容器中创建组件实例
    const cardRef = this.cardContainer.createComponent(cardFactory);
    // 3. 获取组件实例，设置输入属性
    const cardInstance = cardRef.instance;
    cardInstance.cardTitle = `卡片 ${this.cardInstances.length + 1}`;
    cardInstance.cardContent = `这是动态生成的第${this.cardInstances.length + 1}个组件实例`;

    // 4. 监听组件的输出事件（比如删除按钮的点击）
    cardInstance.onRemove.subscribe(() => {
      // 销毁组件并从实例列表中移除
      const index = this.cardInstances.indexOf(cardInstance);
      if (index !== -1) {
        this.cardInstances.splice(index, 1);
        cardRef.destroy();
      }
    });

    // 5. 将实例存入列表
    this.cardInstances.push(cardInstance);
  }
}

动态组件示例（dynamic-card.component.ts） #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-dynamic-card',
  template: `
    <div class="card">
      <h3>{{ cardTitle }}</h3>
      <p>{{ cardContent }}</p>
      <button (click)="onRemove.emit()">删除此卡片</button>
    </div>
  `,
  styles: [`
    .card {
      padding: 15px;
      margin: 10px 0;
      border: 1px solid #eee;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  `]
})
export class DynamicCardComponent {
  @Input() cardTitle!: string;
  @Input() cardContent!: string;
  @Output() onRemove = new EventEmitter<void>();
}

容易踩坑的注意事项 #

• 容器引用的获取：一定要给@ViewChild加上{ read: ViewContainerRef }，否则默认获取的是ElementRef，无法用来挂载动态组件。
• 组件的声明与编译：在Angular 9+版本中，entryComponents已经不是必须的，但如果你的组件没有在模板中直接使用，最好还是在模块的entryComponents数组中添加它，确保Angular能正确编译这个动态组件。
• 实例的清理：如果需要销毁动态组件，一定要调用组件引用的destroy()方法，同时从实例列表中移除对应的对象，避免内存泄漏。

如果之前的尝试失败，可以对照上面的步骤检查一下，大概率是容器引用获取错误、服务注入遗漏或者组件编译配置的问题。

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