Question

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

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt; div class =”abc“＆gt;＆lt; / div＆gt;＆＃xD;＆＃xA;＆lt; style＆gt;＆＃xD;＆＃xA ; .abc {＆＃xD;＆＃xA; background-color：{{myColor}}＆＃xD;＆＃xA; }＆＃的xD;＆＃XA;＆LT; /风格＆GT;

＆＃的xD;＆＃XA;

＆＃的xD; ＆＃xA; 
＆＃xA;＆＃xA; 无论如何动态绑定背景颜色的值？ ＆＃xA;实际上我可以通过将css移动到内联html来实现这一点，例如＆lt; div class =“abc”[style.background-color] =“myColor”＆gt;＆lt; / div＆gt;  ，但由于某种原因，我不能这样做。 
＆＃xA;＆＃xA; 有没有人有任何想法？非常感谢你！＆＃xA;

Answer 1

您可以使用ng2 styler或编写自己的装饰器，根据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];
        })];


   }
}

将值绑定到<style>标签Angular 2模板

1 个答案: