javascript - 内容丰富 + Angular2

Question

您好，我正在尝试使用 Contentful 交付 API 将 Contentful 与 Angular2 一起使用

例如我可以得到具体的数据

Contentful.service.ts

HomePage() {              
    return this.http
        .get('https://cdn.contentful.com/spaces/PRIVATE/entries?access_token=PRIVATE&sys.id=PRIVATE')
        .map((res:Response) => res.json());    /* map response to var */  
}

主页.component.ts

export class Home {

pagename: string;

    ngOnInit() {

        this.http.HomePage()
           .subscribe( 
               data => {
                       this.pagename = data.items[0].fields.pageName;
               }
          );
    }
 }

但是如果我有多个项目，我需要将每个 data.item 声明为一个字符串，这会变得很冗长。然后，如果我决定向内容类型添加一个新字段，这可能会添加到数组的中间，从而破坏我拥有的当前绑定(bind)，并且需要再次更新它们。

我看过另一个仓库，他们在模板中使用了我正在寻找的架构，我知道这是做我需要做的事情的正确方法。

例如主页.template.html

<ul contentful-entries="'content_type=dog&limit=10'">
  <li ng-repeat="dog in $contentfulEntries.items">
    {{ dog.fields.name }}
  </li>
</ul>

这意味着不存在数组破坏的风险，并且 tbh 构造代码以进行缩放并添加到其中。但是我看到这个的 repo

Exmaple Repo by jvandemo

是用 AngularJS V1 编写的，我不确定如何让它在 Angular2 中工作。我还在学习，我觉得如果有人能指出我正确的方向和例子，我可以继续并征服这个项目!

最好是示例组件和服务。我是否还假设需要应用 Contentful SDK？

还有链接关系的问题(contentful 推荐构建大型内容条目)。

Contentful 将列出 Items 中的字段，这些字段与具有该 ID 和内容的字段中的内容具有链接关系。该项目的任何 Assets 都将放入包含/ Assets

例如

 {
  "sys": {
      "type": "Array"
  },
  "total": 1,
  "skip": 0,
  "limit": 100,
  "items": [
     {
        "sys": {
            "space": {
            "sys": {
            "type": "Link",
            "linkType": "Space",
            "id": "1ST_UNIQUE_ID"
        }
    },
    "id": "2ND_UNIQUE_ID",
    "type": "Entry",
    "createdAt": "2016-07-14T16:30:12.787Z",
    "updatedAt": "2016-07-14T16:30:12.787Z",
    "revision": 1,
    "contentType": {
      "sys": {
        "type": "Link",
        "linkType": "ContentType",
        "id": "pressRelease"
      }
    },
    "locale": "en-US"
  },
  "fields": {
    "title": "Title of Review",
    "excerpt": "Excerpt of review",
    "content": "Content of Review",
    "dateCreated": "2016-07-01",
    "datePublished": "2016-07-14",
    "featureImage": {
      "sys": {
        "type": "Link",
        "linkType": "Asset",
        "id": "3RD_UNIQUE_ID"
      }
    }
  }
}
],
"includes": {
    "Asset": [
       {
         "sys": {
         "space": {
         "sys": {
             "type": "Link",
             "linkType": "Space",
             "id": "1ST_UNIQUE_ID"
         }
       },
       "id": "4TH_UNIQUE_ID",
       "type": "Asset",
       "createdAt": "2016-07-14T16:30:05.078Z",
       "updatedAt": "2016-07-14T16:30:05.078Z",
       "revision": 1,
       "locale": "en-US"
    },
    "fields": {
      "title": "Image Title",
      "description": "Image Description",
      "file": {
        "url": "//url-of-image.jpg",
        "details": {
          "size": 43098,
          "image": {
            "width": 1278,
            "height": 928
          }
        },
        "fileName": "image.jpg",
        "contentType": "image/jpeg"
      }
    }
  }
  ]
 }
 }

我假设通过查找所需项目的 ID，然后查找任何关系，您可以获得 Assets 的 ID，然后查看 Assets ？但这又是通过 SDK 完成的吗？或者我需要写这段代码吗？

我迷路了...

感谢任何帮助，谢谢。

Answer 1

我在 contentful 工作，负责 JS SDK。

我在这里看到的解决方案很少:

1. 可以关注this我们构建的示例并从那里继续，它构建在 Angular 之上，您可能还需要更新依赖项等...如果您需要任何帮助，请随时在那里创建问题，

2. 使用 ngUpgrade，您可以使 Angular 1 模块在 Angular 2 上运行，反之亦然 更多信息 here .这是一个快速而肮脏的解决方案

3. 您可以 fork 代码并通过 Angular migration guide

4. 您可以使用 contenful.js SDK 并将其包装在服务中，在那里您将获得链接解析等......然后填充您的 View

我现在无法为您提供示例代码，但我们正在使用 Angular 2 和其他框架开发示例项目。

请注意，您提到的 repo 不是由 Contentful 官方维护的。

最好的， 哈立德