Angular：如何根据组件名称动态加载组件

你直接写 <{{ key.url }}></{{ key.url }}> 是没法生效的，因为Angular的模板是静态编译的——编译器在构建阶段就会解析模板里的组件标签，这种字符串拼接的动态标签根本不会被识别，自然也不会加载对应的组件。

下面给你两种可行的解决方案，优先推荐第一种，因为更简洁易维护：

方案1：使用Angular内置的NgComponentOutlet指令（推荐） #

这是Angular专门为动态加载组件提供的指令，不需要手动操作组件工厂，用法非常直观。

步骤1：准备组件映射表

首先把所有可能动态加载的组件和它们的名称（也就是你存在url字段里的字符串）做一个映射，这样可以通过组件名称找到对应的组件类：

// 在你的表格组件类里定义
import { Type } from '@angular/core';
import { UserAvatarComponent } from './user-avatar.component';
import { StatusTagComponent } from './status-tag.component';

// 键就是你存在url字段里的组件名称，值是组件类
const componentMap: Record<string, Type<any>> = {
  'UserAvatarComponent': UserAvatarComponent,
  'StatusTagComponent': StatusTagComponent,
  // 把所有需要动态加载的组件都加进来
};

步骤2：修改模板，使用ngComponentOutlet

把原来的动态组件标签替换成ngComponentOutlet，同时可以直接传递输入属性（比如把当前行对应列的数据传给动态组件）：

<table>
  <thead>
    <tr>
      <th *ngFor='let key of columns'> {{ key.label }} </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let row of rows'>
      <td *ngFor="let key of columns">
        <!-- 标准列展示数据 -->
        <span *ngIf='key.type === Columntype.Standard'> {{ row[key.id] }} </span>
        <!-- 动态组件列 -->
        <ng-container *ngIf='key.type === Columntype.Component'>
          <ng-container 
            *ngComponentOutlet="
              getComponent(key.url); 
              inputs: { data: row[key.id] }
            "
          ></ng-container>
        </ng-container>
      </td>
    </tr>
  </tbody>
</table>

步骤3：在组件类中添加获取组件的方法

export class YourTableComponent {
  columns: ListHeader[];
  rows: any[];
  private componentMap = componentMap; // 引用上面的映射表

  // 根据组件名称返回对应的组件类
  getComponent(componentName: string): Type<any> | null {
    return this.componentMap[componentName] || null;
  }
}

注意事项：

• 如果动态组件是非独立组件，必须在所属模块的declarations数组中声明；如果是Angular 14+的独立组件，需要在表格组件的imports数组中导入这些动态组件。
• 确保动态组件有对应的输入属性（比如上面的data），这样才能接收行数据。

方案2：手动使用ViewContainerRef创建组件（适合复杂场景） #

如果需要更精细地控制组件的创建、销毁或者事件监听，可以手动通过ViewContainerRef来实现。

步骤1：修改模板，添加组件容器

<table>
  <thead>
    <tr>
      <th *ngFor='let key of columns'> {{ key.label }} </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let row of rows; let rowIndex = index'>
      <td *ngFor="let key of columns; let colIndex = index">
        <span *ngIf='key.type === Columntype.Standard'> {{ row[key.id] }} </span>
        <!-- 用ng-template作为动态组件的容器 -->
        <ng-template 
          *ngIf='key.type === Columntype.Component' 
          #dynamicContainer
        ></ng-template>
      </td>
    </tr>
  </tbody>
</table>

步骤2：在组件类中动态加载组件

import { 
  Component, 
  ViewChildren, 
  QueryList, 
  ViewContainerRef, 
  Type,
  AfterViewInit,
  OnChanges,
  SimpleChanges
} from '@angular/core';
import { ListHeader, Columntype } from './your-path';
import { UserAvatarComponent } from './user-avatar.component';
import { StatusTagComponent } from './status-tag.component';

const componentMap: Record<string, Type<any>> = {
  'UserAvatarComponent': UserAvatarComponent,
  'StatusTagComponent': StatusTagComponent,
};

export class YourTableComponent implements AfterViewInit, OnChanges {
  columns: ListHeader[];
  rows: any[];

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

  ngAfterViewInit() {
    this.loadDynamicComponents();
  }

  // 当rows或columns变化时，重新加载组件
  ngOnChanges(changes: SimpleChanges) {
    if (changes['rows'] || changes['columns']) {
      this.loadDynamicComponents();
    }
  }

  private loadDynamicComponents() {
    // 先清空所有已加载的组件，避免重复创建
    this.dynamicContainers.forEach(container => container.clear());

    this.dynamicContainers.forEach((container, index) => {
      // 计算当前容器对应的行和列
      const rowIndex = Math.floor(index / this.columns.length);
      const colIndex = index % this.columns.length;
      const column = this.columns[colIndex];
      const rowData = this.rows[rowIndex][column.id];

      // 获取要加载的组件类
      const componentClass = componentMap[column.url as string];
      if (!componentClass) return;

      // 创建组件并传递数据
      const componentRef = container.createComponent(componentClass);
      componentRef.instance.data = rowData;

      // 如果需要监听组件的输出事件，可以在这里订阅
      // componentRef.instance.onClick.subscribe(data => { /* 处理事件 */ });
    });
  }
}

注意事项：

• 记得在数据更新时清空容器并重新加载组件，避免内存泄漏。
• 同样要确保动态组件已在模块中声明或作为独立组件导入。

方案选择建议： #

• 如果只是简单加载组件并传递输入属性，方案1（NgComponentOutlet）完全足够，代码更简洁易维护。
• 如果需要监听动态组件的输出事件、手动控制组件生命周期，或者有更复杂的逻辑，再考虑方案2。

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