Angular 2:在角度2模板中编写样式标签

时间:2017-01-19 14:25:20

标签: angular angular-cli

我正在使用角度2和角度cli。 我正在尝试在组件的模板中编写一些样式标签。我希望能够根据媒体查询指定背景图像。

我无法将代码直接放在css文件中,因为图像存储在变量中。

我不能使用[style.background-image]绑定,因为基于媒体查询的背景图像会有所不同

在下面的代码中,bkgImg是一个包含图像名称的字符串变量(例如test.jpg),而imageUrl是一个管道,它将根据表示大小的参数构建背景图像的完整URL。

我的问题是这个代码与文档末尾的所有其他样式一起添加(即angular不会用它的值替换变量)

<style>
@media (max-width: 1600px) {
  .textWrapper
  {
    background-image: url({{bkgImg|imageUrl:'1600x1200'}});
  }
}

@media (max-width: 1200px) {
  .textWrapper
  {
    background-image: url({{bkgImg|imageUrl:'1200x800'}});
  }
} 
</style>

我做错了什么?

0 个答案:

没有答案