Javascript 在角度模板的样式标记中使用变量？

我在angular 5应用程序上工作，我需要在模板的样式标记中应用动态css。 我试过一些解决办法，但都不管用

app.component.ts

customCss : any;

constructor(){}

ngOnInit(){
   this.customCss['color'] = "red";
}

app.component.html

<div>
   <span class="custom_css">This is angular 5 application</span>
</div>

<style>
   .custom_css{
      color: {{customCss.color}};
   }
</style>

---

非常感谢您的帮助。

您可以使用

[ngStyle]

指令：

<span [ngStyle]="{'color': 'red'}">
 This is angular 5 application
</span>

---

您可以使用[style.customClass]=“methodInComponent（）”

---

如果组件中的方法返回true，这将应用该类

如果您在给定组件中只有很少的元素需要更改，如果您需要根据用户的选择（并在运行中）更改应用程序的整体外观，那么给出的答案是有效的，到目前为止，我发现的唯一方法是在javascript中覆盖css，如下所示：

this.stylesService.get().subscribe(({ customStyles }) => {
     const style = document.createElement('style');
     style.innerHTML = 
     `.picture {
         background-image: url(${customStyles.backgroundUrl});
     }
     h1, h2 {
         color: ${customStyles.primaryColor};
     }`;

     document.body.appendChild(style);
});

---

顺便说一句，如果您这样设置颜色：

其中

color='var（-cssValue）

it不起作用

但是，这是正确的：

看看这个，它适用于所有其他情况，但不适用于css部分。我不认为这将允许您在模板中使用

样式。但是创建动态元素很容易，但是您可以像这样使用var（）
poop
在您定义的
：host{--poop:brown；}
中。你通常不想这样做，但你可以这样做。
<span [ngStyle]="applyStyles()">
 This is angular 5 application
</span>

applyStyles() {
    const styles = {'color' : 'red'};
    return styles;
}

this.stylesService.get().subscribe(({ customStyles }) => {
     const style = document.createElement('style');
     style.innerHTML = 
     `.picture {
         background-image: url(${customStyles.backgroundUrl});
     }
     h1, h2 {
         color: ${customStyles.primaryColor};
     }`;

     document.body.appendChild(style);
});