如何在Angular中渲染以字符串形式存储的组件选择器？

方案一：使用 ComponentFactoryResolver 动态创建组件（推荐，适配数据库返回场景） #

这种方式需要先建立组件选择器与组件类的映射关系，因为数据库返回的是选择器字符串，我们需要通过它定位到对应的组件类。

步骤1：编写组件映射与动态加载逻辑 #

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
// 导入需要动态渲染的目标组件
import { AppDashboardComponent } from './app-dashboard/app-dashboard.component';
import { UserStatsWidgetComponent } from './user-stats-widget/user-stats-widget.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {
  // 建立选择器字符串到组件类的映射表
  componentMap: Record<string, any> = {
    'app-dashboard': AppDashboardComponent,
    'user-stats-widget': UserStatsWidgetComponent
  };
  // 模拟从数据库获取的选择器字符串
  targetWidgetSelector = 'app-dashboard';

  // 获取承载动态组件的容器
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) dynamicContainer!: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

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

  renderDynamicComponent(): void {
    // 清空容器，避免重复渲染
    this.dynamicContainer.clear();
    // 通过选择器获取对应的组件类
    const targetComponent = this.componentMap[this.targetWidgetSelector];
    if (targetComponent) {
      // 创建组件工厂并渲染组件
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(targetComponent);
      this.dynamicContainer.createComponent(componentFactory);
    }
  }
}

步骤2：在模板中添加组件容器 #

在dashboard.component.html中添加用于承载动态组件的容器：

<div #dynamicContainer></div>

方案二：使用 innerHTML + DomSanitizer（仅适合无交互静态组件，存在安全风险） #

如果只是渲染静态无交互的组件，可以用这种方式，但Angular默认会过滤未知元素，需要配合DomSanitizer标记HTML为安全，同时确保目标组件已在模块中声明并导出。

代码实现 #

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {
  // 模拟数据库返回的组件选择器字符串
  rawWidgetHtml = `<app-dashboard></app-dashboard>`;
  safeWidgetHtml!: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    // 标记HTML为安全，避免被Angular过滤
    this.safeWidgetHtml = this.sanitizer.bypassSecurityTrustHtml(this.rawWidgetHtml);
  }
}

模板中渲染 #

<div [innerHTML]="safeWidgetHtml"></div>

注意：该方式存在XSS安全风险，且Angular变更检测对这类组件的支持有限，复杂交互组件可能无法正常工作，仅推荐用于静态场景。

方案三：使用Angular CDK的Portal（适合复杂动态组件场景） #

如果需要更灵活的组件切换、复用逻辑，可以使用Angular CDK的Portal模块。

步骤1：安装CDK #

npm install @angular/cdk

步骤2：导入Portal模块 #

在你的功能模块中导入：

import { PortalModule } from '@angular/cdk/portal';

@NgModule({
  imports: [PortalModule]
})
export class DashboardModule { }

步骤3：编写动态渲染逻辑 #

import { Component, OnInit, ViewChild } from '@angular/core';
import { ComponentPortal } from '@angular/cdk/portal';
import { CdkPortalOutlet } from '@angular/cdk/portal';
import { AppDashboardComponent } from './app-dashboard/app-dashboard.component';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {
  componentMap: Record<string, any> = {
    'app-dashboard': AppDashboardComponent
  };
  targetWidgetSelector = 'app-dashboard';

  @ViewChild(CdkPortalOutlet) portalOutlet!: CdkPortalOutlet;

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

  renderDynamicComponent(): void {
    const targetComponent = this.componentMap[this.targetWidgetSelector];
    if (targetComponent) {
      const componentPortal = new ComponentPortal(targetComponent);
      this.portalOutlet.attach(componentPortal);
    }
  }
}

模板中添加Portal容器 #

<ng-template [cdkPortalOutlet]></ng-template>

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