Binding Wert <Style> Tag Angular 2 Vorlage

Question

Ich habe eine Komponente, die Vorlage von HTML-Datei, die Vorlage wie diese

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

Gibt es trotzdem, um dynamische Bindung den Wert der Hintergrund- mit Farbe ? Eigentlich kann ich das tun, indem ich css zu Inline-HTML wie diese <div class="abc" [style.background-color]="myColor"></div> verschiebe, aber aus irgendeinem Grund kann ich das nicht tun.

Hat jemand irgendwelche Ideen? Vielen Dank!

Answer 1

können Sie ng2 styler verwenden oder eigene Dekorateur schreiben, die CSS als Text auf der Grundlage des NG2 styler Code importiert interpoliert

in vier Dekorateur Funktion könnten Sie verwenden:

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

Und dann:

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


    } 
}