Angular 2动态模板

时间:2016-09-08 11:36:57

标签: angular

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

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

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

Angular2 RC5

编辑:

模板A:设置CSS的css规则(蓝色文字,标题大写),标题,段落,图片,段落和其他地方的链接(在段落内) 模板B:设置c的css规则(红色文本,常规标题),标题,图像旋转木马,一个段落

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

}

1 个答案:

答案 0 :(得分:1)

我认为您最好的选择是为每种样式创建一个组件,其中父组件使用ngSwitch在文章之间进行交换。所以......

> m <- mongo(collection = "games", db = "games")
> someGame = m$find(someQuery)

> typeof(someGame)
[1] "list"
> typeof(someGame$players)
[1] "list"

> someGame$players
  benchmarks.tower_damage.raw benchmarks.tower_damage.pct kills_per_min
1                           0                   0.0608506            NA
2                         105                   0.2522049    0.07380074
3                        1977                   0.7609042    0.33210332
4                        2042                   0.9973893    0.07380074

除此之外,如果不知道“文章”数据模型是什么样的话,我不知道还能做些什么。

编辑: 看到建议的数据模型后,在模板中你可以在ngFor内部执行ngSwitch,迭代你的“元素”数组。我知道这有点笨拙,但这可能是你最好的选择。然后obv共享“段落”,“图像”和“轮播”组件,以便在不同的文章模板之间使用。