Angular中NgFor内调用动态组件的渲染异常问题

你遇到的核心问题我之前也碰到过——Angular模板在编译阶段是静态解析标签的，没法直接把变量值作为组件标签名来渲染。所以你写的<component>只会被当成固定标签处理，不会自动替换成数组里的component1、component2这类组件。要实现你想要的效果，得用Angular提供的动态组件加载API，具体步骤如下：

1. 准备模板挂载容器 #

首先在模板里为每个动态组件准备一个容器，我们会通过@ViewChildren获取这些容器的引用：

<div *ngFor="let _ of components; let i = index">
  <!-- 每个动态组件的挂载容器 -->
  <div #componentContainer></div>
</div>

这里*ngFor循环只需要对应数组的长度，所以用_做占位符，同时记录索引i用来匹配组件数组。

2. 在组件类中动态创建组件实例 #

在组件类里，我们需要等视图初始化完成后，遍历容器和组件数组，为每个容器创建对应的组件：

import { Component, ViewChildren, QueryList, ViewContainerRef, AfterViewInit } from '@angular/core';
// 导入你要动态渲染的组件类
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
import { Component3 } from './component3.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  // 存储要渲染的组件类数组
  components = [Component1, Component2, Component3];
  
  // 获取所有容器的ViewContainerRef引用
  @ViewChildren('componentContainer', { read: ViewContainerRef }) 
  componentContainers!: QueryList<ViewContainerRef>;

  ngAfterViewInit(): void {
    // 遍历容器和组件数组，逐个创建组件
    this.componentContainers.forEach((container, index) => {
      // 先清空容器，避免重复创建组件
      container.clear();
      // Angular 13+ 可以直接用createComponent方法生成组件实例
      const componentRef = container.createComponent(this.components[index]);
      // 如果需要给动态组件传值，直接操作instance属性即可
      // componentRef.instance.yourInputProperty = '自定义内容';
    });
  }
}

3. 组件配置的注意事项 #

• Angular 9及以上版本：不需要再配置entryComponents，只要组件在模块的declarations数组中声明即可。
• Angular 14+ 独立组件（Standalone）：如果你的组件是独立组件（设置了standalone: true），需要在父组件的imports数组中导入这些组件：

  @Component({
    selector: 'app-root',
    standalone: true,
    // 导入所有要动态渲染的独立组件
    imports: [Component1, Component2, Component3],
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  

为什么原来的方法不生效？ #

Angular的模板编译是静态过程，模板里的标签会在编译阶段被解析成对应的组件工厂。你写的<component>会被当作一个未识别的HTML标签（或自定义元素），而不是动态替换成变量中的组件类，所以必须通过ViewContainerRef.createComponent这种动态API来实现组件的动态挂载。

内容的提问来源于stack exchange，提问作者Alex. G