1

こんにちは、コンテンツ配信 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 */  
}

ホームページ.コンポーネント.ts

export class Home {

pagename: string;

    ngOnInit() {

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

しかし、複数のアイテムがある場合は、各 data.item を文字列として宣言する必要があり、非常に長くなります。そして、コンテンツ タイプに新しいフィールドを追加することにした場合、これは配列の途中に追加される可能性があるため、現在のバインディングが壊れ、すべてを再度更新する必要があります。

私が探しているアーキテクチャをテンプレートで使用している別のレポを見たことがあります。

例: website.template.html

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

これは、配列が壊れたり、tbh 構造がスケール用のコードを追加したりするリスクがないことを意味します。しかし、私がこれを見たレポ

jvandemo によるレポの例

AngularJS V1 で書かれており、Angular2 でこれを機能させる方法がわかりません。私はまだ学習中であり、誰かが私を正しい方向に向けることができれば、このプロジェクトを征服することができると感じています!

理想的には、コンポーネントとサービスの例です。また、Contentful SDK を適用する必要があると想定していますか?

また、リンク関係の問題もあります (contentful が大規模なコンテンツ エントリの作成を推奨する方法)。

Contentful は、その ID とコンテンツを持つフィールド内のコンテンツにリンクされた関係を持つアイテム内のフィールドを一覧表示します。そのアイテムのアセットは、Includes/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 を調べてから、アセットの ID を取得してからアセットを調べる関係があると思いますか? しかし、これも SDK を介して行われますか? または、このコードを書く必要がありますか?

道に迷いました...

どんな助けでも大歓迎です、ありがとう。

4

1 に答える 1

2

私は contentful で働いており、JS SDK を担当しています。

ここでいくつかの解決策を見ることができます:

  1. 私たちが作成したこの例に従って、そこから続けることができます。これはAngularの上に構築されています。依存関係などを更新する必要がある場合もあります...助けが必要な場合は、そこに問題を作成してください。

  2. ngUpgrade を使用すると、Angular 1 モジュールを Angular 2 で実行したり、その逆の詳細情報を作成したりできます。それは迅速で汚い解決策です

  3. コードをフォークして、 Angular 移行ガイドに進むことができます

  4. contenful.js SDK を使用して Service にラップすると、リンクの解決などが行われ、ビューにデータが入力されます。

現在、サンプル コードを提供することはできませんが、Angular 2 やその他のフレームワークを使用したサンプル プロジェクトに取り組んでいます。

あなたが言及したリポジトリは、Contentful によって公式に維持されていないことに注意してください。

ベスト、カレド

于 2016-07-18T11:13:02.920 に答える