在 Contentful 富文本渲染器中使用自定义 Angular 组件答案

【问题标题】：Using custom Angular component inside Contentful rich text renderer在 Contentful 富文本渲染器中使用自定义 Angular 组件
【发布时间】：2021-11-04 16:24:23
【问题描述】：

我在 Contentful 中有一个富文本元素，其中包含一个嵌入条目。我正在尝试将该嵌入式条目呈现在自定义 Angular 组件中。但是，当我将选项传递给 Contentful documentToHtmlString 函数时，它会显示标记，但不会呈现任何内容，甚至不会触发我在自定义组件打字稿文件中拥有的 console.log() 函数。

用于渲染的TYPESCRIPT

convertToHTML(document:any[]) {
    const options = {
      renderNode: {
        [BLOCKS.EMBEDDED_ENTRY]: (node:any, next:any) => `<embed-element [node]="${node}" [content]="${next(node.content)}"></embed-element>`
      }
    }
    let unsafe = documentToHtmlString(document, options);
    return this.sanitizer.bypassSecurityTrustHtml(unsafe);
}

用于渲染的 HTML

<span [innerHTML]="convertToHTML(article.fields.content)"></span>

我还在app.module.ts 文件的提供程序部分中加载了自定义元素<embed-element></embed-element>。

import { EmbedElementComponent } from './shared/components/embed-element/embed-element.component';

@NgModule({
   declarations: [
     ...
     EmbedElementComponent
   ],
   providers: [
     ...
     EmbedElementComponent
   ]
})

然后在自定义元素的 typescript 文件中，我只是在 onInit 函数中有一个 console.log 用于测试目的。我没有在控制台中看到这种情况。

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

@Component({
  selector: 'embed-element',
  templateUrl: './embed-element.component.html',
  styleUrls: ['./embed-element.component.css']
})
export class EmbedElementComponent implements OnInit {

  @Input() node: any;
  @Input() content: any;

  constructor() { }

  ngOnInit(): void {
    console.log(this.node);
  }

}

在自定义元素的 HTML 中，我删除了 <p> 标记，以防它被剥离为“不安全”，并将其替换为以下内容：

EMBEDDED ELEMENT WORKS!!!!!

最后，当一切都被渲染后，我看到这个自定义元素的屏幕上什么也没有出现。然而，在检查元素内部，这就是我得到的。

<embed-element [node]="[object Object]" [content]=""></embed-element>

我如何设法让自定义元素在这方面真正被调用？并且至少收到我在自定义元素中请求的控制台日志消息？

【问题讨论】：

标签： javascript html angular typescript contentful

【解决方案1】：

我认为在这种情况下使用自定义组件不起作用，因为它在 Angulars 范围之外或在初始组件启动之后呈现。

我解决了这个问题，基本上只是一起删除了自定义元素并创建了一个函数来呈现我想要的嵌入元素。

// Notice the new function call, renderCustomElement()
convertToHTML(document:any[]) {
    const options = {
      renderNode: {
        [BLOCKS.EMBEDDED_ENTRY]: (node:any, next:any) => this.renderCustomElement(node)
      }
    }
    let unsafe = documentToHtmlString(document, options);
    return this.sanitizer.bypassSecurityTrustHtml(unsafe);
  }

最后是这个函数，它简单地使用 Bootstrap 样式创建一些基本的 html 并将其返回以进行渲染。

renderCustomElement(node:any) {
    let link = `/support-center/article/${node.data.target.fields.category[0].sys.id}/${node.data.target.sys.id}`;
    return `<style>.card:hover{box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;}</style><a class="card clickable mb-2 text-decoration-none text-dark" href="${link}" target="_blank"><div class="card-header">Article</div><div class="card-body"><h4 class="fw-light">${node.data.target.fields.title}</h4><p class="fw-light pb-0 mb-0">${node.data.target.fields.preview}</p></div></a>`
  }

【讨论】：