在 Angular 中显示 ContentFul RichText

Question

我的 Angular 应用程序中有一个与 Contentful 相关联的博客提要。感谢 Contentful javascript sdk.

https://www.contentful.com/developers/docs/javascript/tutorials/using-contentful-in-an-angular-project/

我正在尝试显示标题和文本字段。这是我的代码：

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {ContentfulService} from '../../services/contentful/contentful.service';
import { Entry } from 'contentful';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
  private posts: Entry<any>[] = [];

  constructor(private postService: ContentfulService) {}

  ngOnInit() {
    this.postService.getPosts()
      .then(posts => {
        this.posts = posts;
        console.log(this.posts);
      });
  }
}

和 html:

<div *ngFor="let post of posts">
    <a href="#">{{ post.fields.title }}</a>
    <div>{{ post.fields.text }}</div>
</div>

title字段显示良好，因为它只是一个字符串字段，但text字段是RichText并显示[object Object].

它确实包含几个 object。 Object 似乎被分成几部分。

https://www.contentful.com/developers/docs/concepts/rich-text/

是否有人已经在 Angular 应用程序中显示了 Contentful RichText？有具体的方法吗？

Answer 1

首先，您必须从您的终端安装 rich-text-html-renderer：

npm install @contentful/rich-text-html-renderer

然后，您可以从您的组件中导入它：

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

并使用它，就像这样：

_returnHtmlFromRichText(richText) {
    if (richText === undefined || richText === null || richText.nodeType !== 'document') {
      return '<p>Error</p>';
    }
    return documentToHtmlString(richText);
}

最后，'call the function' 来自你的 html 像这样：

<div [innerHtml]="_returnHtmlFromRichText(post.fields.text)">
</div>

您还可以添加一些选项来自定义您的富文本，更多信息here。此外，您应该在 Contentful 服务中编写类似于 _returnHtmlFromRichText 的函数，以便以后能够重用它。

Answer 2

我创建了一个 Angular 库，可以使用 Angular 组件呈现富文本：https://github.com/kgajera/ngx-contentful-rich-text

为什么要在 @contentful/rich-text-html-renderer 上使用它？如果您需要自定义默认标记，它允许您使用您无法使用 documentToHtmlString 函数和 [innerHTML].

的 Angular 组件

在 Angular 中显示 ContentFul RichText

Display ContentFul RichText in Angular

javascript

typescript

contentful

angular