Contentful + Angular2

Question

嗨，我試圖用Angular2使用contentful交付API

一起使用Contentful我可以得到具體的數據，例如

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作爲一個字符串來使用，這會很長時間。然後，如果我決定添加一個新的字段到內容類型，這可能會被添加到數組的中間，從而打破了我現有的綁定，並且需要再次更新它們。

我見過另一個回購，他們在模板中使用我正在尋找的架構，我知道的是做我需要做的正確方法。

例如homepage.template.html

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

這將意味着沒有數組突破和TBH結構對大規模的代碼，並增加了它的風險。但是，我已經看到了這個

Exmaple Repo by jvandemo

回購是寫在AngularJS V1，我不確定如何獲得Angular2這個工作。我還在學習，我覺得如果有人可以點我在正確的方向和例子，我可以去征服這個項目！

理想情況下，一個示例組件和服務。我是否還假設Contentful SDK需要應用？

此外還存在鏈接關係問題（內容豐富的建議如何構建大型內容條目）。

Contentful將列出具有該ID和內容的字段內的具有鏈接關係的項目中的字段。並於該項目的資產將投入包括/資產

如

{ 
    "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完成的嗎？或者我需要寫這個代碼？

我迷路了...

任何幫助表示感謝，謝謝。

Answer 1

我工作在內容豐富，我負責JS SDKs。

我可以在這裏看到幾個解決方案：

1. 您可以按照this例如內置美國，並從那裏繼續，它是建立在角頂，你也可能需要更新的依賴等。 。如果您需要任何幫助，請隨時在此處創建問題，請使用ngUpgrade，然後在Angular 2上運行Angular 1模塊，反之亦然here。這是一個快速和骯髒的解決方案

2. 您可以派生代碼並經過Angular migration guide

3. 您可以使用contenful.js SDK，並在服務包起來，您就可以看到該鏈接的分辨率等。然後填充你的視圖

我現在無法爲你提供示例代碼，但我們正在使用Angular 2和其他框架來開發示例項目。

請注意，您提到的回購並非由Contentful正式維護。

最好， 哈立德