각진 2 동적 템플릿

Question

저는 CMS와 같은 것을 개발 중입니다. 템플릿이있는 기사가 있습니다. 기사가 백엔드에 추가되고 템플릿을 사용하여 기사를 표시해야합니다 (기사를 렌더링 할 때 사용할 템플릿을 알고 있습니다). 10 가지 템플릿이 있으므로 템플릿을 저장하는 가장 좋은 방법은 무엇인지 파악하고로드 된 아티클에 따라 올바른 템플릿을로드하는 방법을 알아 내려고합니다. 내가 고려하고 : (새 템플릿을 만들 때 응용 프로그램을 구축 할 필요)

• 백엔드에 템플릿에 대한 메타 데이터를 저장 및 템플릿을 구축 내가 응용 프로그램에서 템플릿을 저장 그것을
• 을 필요로 할 때
• 나는 건축 및 테를 찾고 있어요 각 템플릿의 구성 요소를 갖는 백엔드
• 에 원시 템플릿을 저장하고 동적으로로드 (너무 많은 오버 헤드)

chnological 솔루션입니다. 옵션 1을 사용하고 싶지만 기사 구성 요소의 템플릿을 작성하는 방법을 모릅니다. 기사를 얻고 필요한 템플릿을로드 (빌드)하는 구성 요소를 하나만 갖고 싶습니다.

Angular2 RC5

편집 :

템플릿 A : 설정 CSS 규칙 (파란색 텍스트, 헤드 라인을위한 캡), 제목, 단락, 이미지, 단락 및 (단락 내부) 다른 곳에서 링크의 템플릿 B : CSS 규칙의 설정 B (빨간색 텍스트, 일반 헤드 라인), 제목, 이미지 회전 목마, 한 단락

{ 
"templateId": 1, 
"title": "Article title", 
"elements": [{ 
    "text": "paragraph text" 
}, { 
    "image": "http: //someurl.com" 
}, { 
    "text": "another paragraph text" 
}] 

}

Answer 1

최선의 방법은 ngSwitch를 사용하여 기사간에 교환하는 상위 구성 요소를 사용하여 각 스타일에 대한 구성 요소를 갖는 것입니다. 그래서 ...

<article-component> 
    <div ngSwitch="article.type"> 
    <template-a *ngSwitchCase="a" [article]="article"> 
    </template-a> 
    <template-b *ngSwitchCase="b" [article]="article"> 
    </template-b> 
    <template-c *ngSwitchCase="c" [article]="article"> 
    </template-c> 
    </div> 
</article-component> 

그 외에도 "기사"데이터 모델의 모양을 알지 못하면 무엇을 할 수 있는지 잘 모르겠습니다.

EDIT : Ok 제안 된 데이터 모델을보고 나면 템플릿 내에서 ngForce를 사용하여 "요소"배열을 반복 할 수 있습니다. 나는 이것이 일종의 잔치 인 것을 안다. 그러나 그것은 당신의 최선의 방법 일 가능성이있다. 그리고 obv는 다른 기사 템플리트 사이에서 사용될 "단락", "이미지"및 "회전 목마"구성 요소를 공유했습니다.