如何在Angular中通过数组循环渲染指定组件？

这问题我之前也碰到过！用{{comps}}肯定不行，因为Angular只会把它当成普通字符串渲染，不会识别成组件标签。要实现循环渲染动态组件，得用Angular的动态组件加载API，我给你一步步讲清楚怎么做：

1. 先确保组件已正确声明 #

首先，你要把ComponentOne、ComponentTwo、ComponentThree这些组件在模块（比如AppModule）里声明好，这和普通组件的要求一致：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ComponentOneComponent } from './component-one.component';
import { ComponentTwoComponent } from './component-two.component';
import { ComponentThreeComponent } from './component-three.component';

@NgModule({
  declarations: [
    AppComponent,
    ComponentOneComponent,
    ComponentTwoComponent,
    ComponentThreeComponent
  ],
  imports: [BrowserModule],
  // Angular 9+ 用Ivy编译器，不需要entryComponents了，注释掉即可
  // entryComponents: [ComponentOneComponent, ComponentTwoComponent, ComponentThreeComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 改造组件类，实现动态加载逻辑 #

在AppComponent里，我们需要把组件选择器和对应的组件类做映射，然后通过ViewContainerRef来动态创建组件实例：

// app.component.ts
import { Component, ViewChildren, ViewContainerRef, AfterViewInit } from '@angular/core';
import { ComponentOneComponent } from './component-one.component';
import { ComponentTwoComponent } from './component-two.component';
import { ComponentThreeComponent } from './component-three.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  compData = ['app-component-one', 'app-component-two', 'app-component-three'];

  // 把组件选择器和组件类做映射，方便通过字符串找到对应的组件
  private componentMap: { [key: string]: any } = {
    'app-component-one': ComponentOneComponent,
    'app-component-two': ComponentTwoComponent,
    'app-component-three': ComponentThreeComponent
  };

  // 获取所有循环生成的容器引用，用@ViewChildren因为是多个容器
  @ViewChildren('compContainer', { read: ViewContainerRef }) containers!: ViewContainerRef[];

  ngAfterViewInit(): void {
    // 视图初始化完成后，再渲染动态组件
    this.renderDynamicComponents();
  }

  private renderDynamicComponents(): void {
    this.containers.forEach((container, index) => {
      // 先清空容器，避免重复渲染
      container.clear();
      // 根据当前循环项的选择器，找到对应的组件类
      const targetComponent = this.componentMap[this.compData[index]];
      if (targetComponent) {
        // Angular 13+ 可以直接用createComponent创建组件，无需ComponentFactoryResolver
        container.createComponent(targetComponent);
        
        // 如果需要给动态组件传参或订阅输出，这么做：
        // const compRef = container.createComponent(targetComponent);
        // compRef.instance.inputProperty = '你的参数';
        // compRef.instance.outputEvent.subscribe(data => { /* 处理输出逻辑 */ });
      }
    });
  }
}

3. 修改模板，准备组件容器 #

在app.component.html里，我们用ng-container作为动态组件的承载容器，配合*ngFor循环生成对应数量的容器：

<div *ngFor="let comps of compData">
  <!-- 用#compContainer标记容器，供组件类获取引用 -->
  <ng-container #compContainer></ng-container>
</div>

关键点说明 #

• 为什么用ViewContainerRef：它是Angular用来承载组件实例的容器，只有通过它才能动态创建并挂载组件。
• ngAfterViewInit的作用：必须等视图初始化完成后，才能获取到#compContainer的引用，所以要在这个生命周期钩子中执行渲染逻辑。
• 组件映射表：把选择器字符串和组件类关联起来，是为了方便通过你定义的compData数组找到对应的组件。

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