Angular如何动态渲染任意未知类型的输入组件

核心思路是通过Angular提供的动态组件渲染能力，无需提前声明组件选择器即可动态加载任意类型的组件到网格容器中，以下是具体实现步骤：

基础实现方案（兼容Angular 2+全版本） #

1. 先定义标准的网格项配置类型 #

修改输入属性的结构，将需要渲染的组件类、输入参数、输出事件统一封装：

import { Type } from '@angular/core';

export interface GridItemConfig {
  component: Type<any>; // 要渲染的组件类
  inputs?: Record<string, any>; // 传递给目标组件的输入属性
  outputs?: Record<string, (event: any) => void>; // 监听目标组件的输出事件
}

// 网格组件的输入属性修改为
@Input() gridItems: GridItemConfig[] = [];

2. 模板中预留组件挂载锚点 #

不需要写死组件选择器，用ng-template作为动态组件的挂载容器：

<div class="grid-container">
  <div class="grid-item" *ngFor="let item of gridItems">
    <ng-template #componentAnchor></ng-template>
  </div>
</div>

3. 逻辑层动态渲染组件 #

通过ComponentFactoryResolver和ViewContainerRef完成组件的动态创建、属性赋值和事件绑定：

import { 
  ViewChildren, QueryList, ViewContainerRef, ComponentFactoryResolver,
  OnChanges, SimpleChanges, AfterViewInit, OnDestroy
} from '@angular/core';
import { Subscription } from 'rxjs';

export class GridComponent implements OnChanges, AfterViewInit, OnDestroy {
  @Input() gridItems: GridItemConfig[] = [];
  @ViewChildren('componentAnchor') componentAnchors: QueryList<ViewContainerRef>;
  private outputSubs: Subscription[] = [];

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['gridItems'] && this.componentAnchors) {
      this.renderDynamicComponents();
    }
  }

  ngAfterViewInit(): void {
    this.renderDynamicComponents();
    // 监听锚点列表变化，避免视图更新后渲染异常
    this.componentAnchors.changes.subscribe(() => this.renderDynamicComponents());
  }

  ngOnDestroy(): void {
    // 销毁时取消所有输出事件订阅，避免内存泄漏
    this.outputSubs.forEach(sub => sub.unsubscribe());
  }

  private renderDynamicComponents(): void {
    // 清空之前渲染的组件和旧订阅
    this.componentAnchors.forEach(anchor => anchor.clear());
    this.outputSubs.forEach(sub => sub.unsubscribe());
    this.outputSubs = [];

    this.gridItems.forEach((item, index) => {
      const anchor = this.componentAnchors.get(index);
      if (!anchor) return;

      // 创建组件工厂并生成组件实例
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(item.component);
      const componentRef = anchor.createComponent(componentFactory);

      // 赋值输入属性
      if (item.inputs) {
        Object.keys(item.inputs).forEach(key => {
          componentRef.instance[key] = item.inputs[key];
        });
        componentRef.changeDetectorRef.detectChanges();
      }

      // 绑定输出事件
      if (item.outputs) {
        Object.keys(item.outputs).forEach(key => {
          const sub = componentRef.instance[key].subscribe(item.outputs[key]);
          this.outputSubs.push(sub);
        });
      }
    });
  }
}

Angular 14+ 简化方案 #

如果使用Angular 14及以上版本，可以直接使用内置的NgComponentOutlet指令，无需手动编写组件创建逻辑，仅需要修改模板即可：

<div class="grid-container">
  <div class="grid-item" *ngFor="let item of gridItems">
    <ng-container 
      *ngComponentOutlet="item.component; 
      inputs: item.inputs; 
      outputs: item.outputs"
    ></ng-container>
  </div>
</div>

注意事项 #

• 所有需要动态渲染的组件必须提前在所属模块的declarations数组中声明，Angular 9以下版本还需要额外加入entryComponents数组
• 如果需要响应动态组件的输入属性变更，可以在动态组件内部实现ngOnChanges生命周期
• 组件销毁时必须手动取消所有输出事件的订阅，避免内存泄漏

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