如何通过选择器实现Angular组件的动态渲染？

你用插值和innerHTML绑定的方式行不通，因为Angular的innerHTML只会渲染纯静态HTML，不会识别组件选择器并编译成Angular组件。要实现动态渲染，得用Angular官方提供的动态组件加载机制，具体步骤如下：

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

先在组件的.ts文件里定义一个对象，把需要动态加载的组件选择器和对应的组件类关联起来：

import { AssessmentitemComponent } from './assessmentitem.component';
import { ResponsedeclarationComponent } from './responsedeclaration.component';
import { CorrectResponseComponent } from './correct-response.component';

// 映射选择器到组件类
const componentMap = {
  'app-assessmentitem': AssessmentitemComponent,
  'app-responsedeclaration': ResponsedeclarationComponent,
  'app-correct-response': CorrectResponseComponent
};

2. 使用ViewContainerRef和ComponentFactoryResolver加载组件 #

在宿主组件里注入这两个服务，同时通过@ViewChild获取一个用来挂载动态组件的容器：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-loader',
  template: `<div #dynamicContainer></div>`
})
export class DynamicLoaderComponent implements OnInit {
  // 获取挂载容器
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) dynamicContainer!: ViewContainerRef;
  // 你存储的目标组件选择器
  targetSelector = 'app-assessmentitem';

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    this.loadComponent(this.targetSelector);
  }

  loadComponent(selector: string) {
    // 先清空容器，避免重复渲染
    this.dynamicContainer.clear();
    
    // 根据选择器获取对应的组件类
    const ComponentClass = componentMap[selector];
    if (!ComponentClass) return;

    // 创建组件工厂并实例化组件
    const factory = this.resolver.resolveComponentFactory(ComponentClass);
    const componentRef = this.dynamicContainer.createComponent(factory);

    // 如果需要给组件传输入属性，直接通过instance设置
    // componentRef.instance.someInput = '你的数据';
  }
}

3. 配置组件加载权限 #

• 若使用Angular 9之前的版本，需要把动态加载的组件添加到模块的entryComponents数组中：

@NgModule({
  declarations: [
    DynamicLoaderComponent,
    AssessmentitemComponent,
    ResponsedeclarationComponent,
    CorrectResponseComponent
  ],
  entryComponents: [
    AssessmentitemComponent,
    ResponsedeclarationComponent,
    CorrectResponseComponent
  ]
})
export class AppModule {}

• 若使用Angular 9+的Ivy编译器，或者组件是独立组件（设置了standalone: true），可省略entryComponents配置。

4. 实现嵌套组件的动态渲染 #

针对你给出的嵌套组件结构（app-assessmentitem → app-responsedeclaration → app-correct-response），需要在父组件中预留容器并传递子组件选择器：

比如在AssessmentitemComponent中：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-assessmentitem',
  template: `<div #childContainer></div>`
})
export class AssessmentitemComponent implements OnInit {
  @ViewChild('childContainer', { read: ViewContainerRef }) childContainer!: ViewContainerRef;
  @Input() childSelector?: string;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    if (this.childSelector) {
      this.loadChildComponent(this.childSelector);
    }
  }

  loadChildComponent(selector: string) {
    const ComponentClass = componentMap[selector];
    if (!ComponentClass) return;

    const factory = this.resolver.resolveComponentFactory(ComponentClass);
    this.childContainer.createComponent(factory);
  }
}

然后在宿主组件加载根组件时，传递子组件选择器：

// 在DynamicLoaderComponent的loadComponent方法中
componentRef.instance.childSelector = 'app-responsedeclaration';

同理，在ResponsedeclarationComponent中重复上述逻辑，即可加载app-correct-response组件。

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