綁定值<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];
        })];


   }
}