javascript - 在 Angular 模板的样式标签中使用变量？

Question

我正在开发 Angular 5 应用程序，我需要在模板的样式标签中应用动态 css。我尝试了一些解决方案，但它们没有用。

应用程序组件.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>

当我在浏览器中检查 custom_css 类时，它以样式显示

.custom_css{
   color: {{customCss.color}};
}

感谢任何帮助。

Answer 1

你可以使用[ngStyle]指令:

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

或者像这样:

<span [ngStyle]="applyStyles()">
 This is angular 5 application
</span>

在组件中:

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