Angular 2 动态模板

Question

我正在开发类似 CMS 的东西。我有带有模板的文章。文章是在后端添加的，我需要使用模板显示它们（当我渲染文章时，我知道要使用哪个模板）。由于会有 10 个模板，我试图找出存储模板的最佳方式以及如何根据加载的文章加载正确的模板。 我在考虑什么：

• 在后端存储有关模板的元数据并在需要时构建模板
• 在应用程序中存储模板（创建新模板时需要构建应用程序）
• 在后端存储原始模板
• 每个模板都有一个组件并动态加载它们（开销太大）

我正在寻找一种架构和技术解决方案。我很想选择选项 1，但不知道如何为文章组件构建模板。 我希望只有一个组件，它可以获取文章并加载（构建）所需的模板。

Angular2 RC5

编辑：

模板A：设置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>

除此之外，如果不知道“文章”数据模型是什么样的，我不确定您还能做什么。

编辑： 好的，在看到您提出的数据模型之后，在您的模板中，您可以在 ngFor 中执行 ngSwitch 来迭代您的“元素”数组。我知道这有点笨拙，但这可能是您最好的选择。然后obv共享“段落”、“图片”和“轮播”组件，供不同文章模板之间使用。