绑定值<Style> tag Angular 2 template

Question

我有一个使用html文件模板的组件，这样的模板

 <div class="abc"></div> <style> .abc { background-color: {{myColor}} } </style> 

无论如何动态绑定背景颜色的值？ 实际上我可以通过将css移动到内联html这样做<div class="abc" [style.background-color]="myColor"></div> ，但由于某种原因我无法做到这一点。

有没有人有任何想法？ 非常感谢你！

Answer 1

您可以使用ng2样式或编写自己的装饰器，根据ng2样式代码插入作为文本导入的css

在四个装饰器功能，您可以使用：

metaInformation = window['Reflect'].getOwnMetadata('annotations', target)

接着：

for (let metadata of metainformation){ 
   if (metadata instanceof ComponentMetadata){
     //interpolate somecsstext and add it to to metadata.styles
     //as if it was added from the styles property 
     //of the component decorator metadata
     metadata.styles = [...metadata.styles, somecsstext
        .replace(/{{([a-z1-9]+)}}/ig, function (match, prop) {
          return yourVaribles[prop];
        })];


   }
}