在Contentful富文本渲染器中使用自定义Angular组件不生效问题

• [innerHTML]只会将内容作为普通HTML插入，不会触发Angular的编译流程，自定义组件标签、方括号输入绑定语法都不会被识别，因此不会实例化组件，自然不会触发ngOnInit中的日志
• 将对象直接拼入HTML字符串时，会自动调用toString()方法，最终得到的[object Object]无法传递真实的node数据
• 组件不需要注册到providers数组中，该数组仅用于注册可注入服务，组件仅需在declarations中声明即可

推荐使用Angular动态渲染组件的方案，不直接拼接自定义组件标签到HTML字符串中，而是拆分处理Contentful富文本节点：

1. 调整模板，增加用于动态插入内容的容器

<div #richTextContainer></div>

2. 调整TS逻辑，分节点处理富文本：

import { ViewChild, ViewContainerRef, ComponentFactoryResolver, DomSanitizer } from '@angular/core';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
import { BLOCKS } from '@contentful/rich-text-types';
import { EmbedElementComponent } from './shared/components/embed-element/embed-element.component';

// ...
export class YourComponent {
  @ViewChild('richTextContainer', { read: ViewContainerRef }) richTextContainer: ViewContainerRef;
  article: any; // 你的Contentful文章数据

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private sanitizer: DomSanitizer
  ) {}

  ngAfterViewInit() {
    this.renderRichText(this.article.fields.content);
  }

  private renderRichText(doc: any) {
    this.richTextContainer.clear();
    // 遍历所有富文本节点
    doc.content.forEach(node => {
      if (node.nodeType === BLOCKS.EMBEDDED_ENTRY) {
        // 嵌入式条目节点：动态创建自定义组件
        // Angular 13+ 可省略resolveComponentFactory步骤，直接调用createComponent(EmbedElementComponent)
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(EmbedElementComponent);
        const componentRef = this.richTextContainer.createComponent(componentFactory);
        // 直接传递原始node对象，无需转字符串
        componentRef.instance.node = node;
        componentRef.instance.content = node.content;
        componentRef.changeDetectorRef.detectChanges();
      } else {
        // 普通节点：转HTML后插入
        const html = documentToHtmlString({
          nodeType: 'document',
          content: [node],
          data: {}
        });
        const htmlContainer = document.createElement('div');
        htmlContainer.innerHTML = html;
        this.richTextContainer.element.nativeElement.appendChild(htmlContainer);
      }
    })
  }
}

3. 清理AppModule配置，移除providers数组中的EmbedElementComponent，仅保留declarations中的声明即可。

如果使用Angular 13及以上版本，ComponentFactoryResolver已被标记为废弃，可以直接调用viewContainerRef.createComponent(EmbedElementComponent)创建组件实例，无需提前解析工厂。

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