角2动态模板

Question

我正在开发类似CMS的东西。我有文章有模板。文章是在后端添加的，我需要使用模板来显示它们(当我呈现文章时，我知道要使用哪个模板)。因为会有10种模板，所以我试图找出存储模板的最佳方法，以及如何根据加载的文章加载正确的模板。我所考虑的是：

• 将有关模板的元数据存储在后端，并在需要时构建模板
• 在应用程序中存储模板(创建新模板时需要构建应用程序)
• 在后端存储原始模板
• 为每个模板拥有一个组件并动态加载它们(开销过大)

我正在寻找一个建筑和技术的解决方案。我很想使用选项1，但不知道如何为项目组件构建模板。我希望只有一个组件，它可以获得文章并加载(构建)所需的模板。

Angular2 RC5

编辑：

模板A: css规则集A(蓝色文本，标题大写)，标题，段落，图像，段落和其他地方的链接(段内)模板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>

除此之外，我不确定在不知道“文章”数据模型是什么样子的情况下还能做什么。

编辑:在看到建议的数据模型之后，在模板中您可以在ngFor中执行一个遍历“元素”数组的ngFor。我知道这有点简奇，但这可能是你最好的选择。然后obv共享要在不同文章模板之间使用的“段落”、“图像”和“旋转木马”组件。