如何在Angular中动态加载含自定义组件的CMS返回内容

核心思路 #

Angular的innerHTML无法编译自定义组件和Angular指令，因此需要手动解析CMS返回的HTML内容，识别自定义组件标签，通过ComponentFactoryResolver动态创建组件实例，同时处理属性绑定与事件回调。

实现步骤 #

1. 定义自定义组件 #

先实现需要渲染的some-custom-tag组件，确保输入输出属性符合需求：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'some-custom-tag',
  template: `<button class="consent-btn" (click)="onClick.emit()">{{ label }}</button>`
})
export class SomeCustomTagComponent {
  @Input() label: string;
  @Output() onClick = new EventEmitter<void>();
}

记得在模块的declarations数组中注册该组件（Angular 9+无需手动添加到entryComponents）。

2. 主组件模板与逻辑 #

在需要渲染动态内容的组件中，添加容器占位符，并编写API调用与动态渲染逻辑：

模板代码

<div #dynamicContentContainer></div>

组件逻辑代码

import { Component, OnInit, ViewChild, ViewContainerRef, ElementRef, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ComponentFactoryResolver } from '@angular/core';
import { SomeCustomTagComponent } from './some-custom-tag.component';

@Component({
  selector: 'app-cms-content-renderer',
  templateUrl: './cms-content-renderer.component.html'
})
export class CmsContentRendererComponent implements OnInit, OnDestroy {
  @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) 
  private componentContainer: ViewContainerRef;
  @ViewChild('dynamicContentContainer', { read: ElementRef }) 
  private domContainer: ElementRef;

  constructor(
    private http: HttpClient,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

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

  ngOnDestroy(): void {
    // 清理动态创建的组件，避免内存泄漏
    this.componentContainer.clear();
  }

  private loadCmsContent(): void {
    // 替换为实际CMS API地址
    this.http.get<string>('/api/cms/terms-content').subscribe(html => {
      this.renderDynamicContent(html);
    });
  }

  private renderDynamicContent(rawHtml: string): void {
    // 清空容器原有内容
    this.componentContainer.clear();
    this.domContainer.nativeElement.innerHTML = '';

    // 解析HTML字符串为DOM节点
    const parser = new DOMParser();
    const doc = parser.parseFromString(rawHtml, 'text/html');
    const rootSpan = doc.querySelector('span');

    if (!rootSpan) return;

    // 遍历所有子节点，分别处理文本与元素
    Array.from(rootSpan.childNodes).forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        // 添加文本节点到容器
        this.domContainer.nativeElement.appendChild(
          document.createTextNode(node.textContent.trim())
        );
      } else if (node.nodeType === Node.ELEMENT_NODE) {
        const element = node as HTMLElement;
        if (element.tagName.toLowerCase() === 'some-custom-tag') {
          // 动态创建自定义组件
          this.createCustomComponent(element);
        } else {
          // 普通HTML元素直接克隆添加
          this.domContainer.nativeElement.appendChild(element.cloneNode(true));
        }
      }
    });
  }

  private createCustomComponent(sourceElement: HTMLElement): void {
    // 获取组件工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SomeCustomTagComponent);
    // 创建组件实例
    const componentRef = this.componentContainer.createComponent(componentFactory);
    
    // 绑定输入属性
    componentRef.instance.label = sourceElement.getAttribute('label') || 'Consent';
    // 绑定输出事件
    componentRef.instance.onClick.subscribe(() => this.openModalDialog());

    // 将组件DOM插入到容器中
    this.domContainer.nativeElement.appendChild(componentRef.location.nativeElement);
  }

  // 模态框打开逻辑
  openModalDialog(): void {
    // 这里替换为你的模态框实现
    alert('Consent modal opened!');
  }
}

关键注意事项 #

• XSS安全：确保CMS返回的内容是可信的，避免注入恶意脚本。若需处理不可信内容，需额外过滤危险元素与属性。
• 性能优化：若内容频繁更新，可考虑缓存API响应与组件实例，减少重复创建开销。
• 复杂场景扩展：如果CMS返回的内容包含Angular指令（如*ngIf、管道），需使用Compiler动态编译组件模板，但这会增加复杂度，且生产环境需配置允许运行时编译。

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