Angular能否通过组件选择器数组动态渲染组件？

你给出的模板插值方式无法实现动态渲染组件，因为Angular的模板是预编译的，这种通过字符串拼接生成的标签不会被Angular识别为组件，无法完成组件初始化、输入绑定等核心逻辑。

要实现基于组件选择器数组的动态渲染，需要利用Angular的ViewContainerRef API手动创建组件实例，具体步骤如下：

1. 建立选择器与组件类的映射 #

无法直接通过选择器字符串获取组件类，需提前定义映射关系：

// 导入目标组件类
import { Component1Component } from './component1.component';
import { Component2Component } from './component2.component';
import { Component3Component } from './component3.component';

// 选择器 -> 组件类的映射表
export const ComponentSelectorMap = {
  'app-component-1': Component1Component,
  'app-component-2': Component2Component,
  'app-component-3': Component3Component
};

2. 实现通用动态渲染组件 #

创建通用组件，通过ViewContainerRef动态创建并挂载组件：

import { Component, Input, ViewContainerRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { ComponentSelectorMap } from './component-selector-map';

@Component({
  selector: 'app-dynamic-renderer',
  template: '<ng-container #renderContainer></ng-container>'
})
export class DynamicRendererComponent implements OnInit, OnChanges {
  @Input() componentSelectors: string[] = [];
  @Input() data: any;

  constructor(private viewContainerRef: ViewContainerRef) {}

  ngOnInit(): void {
    this.renderComponents();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 当组件选择器或数据变化时，重新渲染
    if (changes['componentSelectors'] || changes['data']) {
      this.renderComponents();
    }
  }

  private renderComponents(): void {
    // 清空容器，避免重复渲染
    this.viewContainerRef.clear();

    this.componentSelectors.forEach(selector => {
      const ComponentClass = ComponentSelectorMap[selector];
      if (!ComponentClass) return;

      // 创建组件实例
      const componentRef = this.viewContainerRef.createComponent(ComponentClass);
      // 绑定输入属性
      componentRef.instance.data = this.data;

      // 如需监听组件输出，可通过以下方式：
      // componentRef.instance.someOutput.subscribe(value => { /* 处理输出逻辑 */ });
    });
  }
}

3. 注册组件 #

确保所有要动态渲染的组件都在当前模块的declarations中（Angular 13+无需额外配置entryComponents）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { DynamicRendererComponent } from './dynamic-renderer.component';
import { Component1Component } from './component1.component';
import { Component2Component } from './component2.component';
import { Component3Component } from './component3.component';

@NgModule({
  declarations: [
    DynamicRendererComponent,
    Component1Component,
    Component2Component,
    Component3Component
  ],
  imports: [BrowserModule],
  bootstrap: [DynamicRendererComponent]
})
export class AppModule {}

4. 使用通用组件 #

在模板中直接传入选择器数组和数据即可：

<app-dynamic-renderer
  [componentSelectors]="['app-component-1', 'app-component-2', 'app-component-3']"
  [data]="yourSharedData"
></app-dynamic-renderer>

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