Question

我正在开发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>

当我在浏览器中检查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;
}

Answer 2

如果您在给定组件中需要更改的元素很少，或者需要根据用户的选择（实时）更改应用程序的整体外观，则给定的答案有效，这是我发现的唯一方法到目前为止，要像下面这样在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);
});

Answer 3

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

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

Answer 4

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

<div [style.color]="color"></div>

在color='var(--cssValue)'的地方不起作用！

但是，这可以正常工作：

<div [ngStyle]="{color: color}"></div>

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

4 个答案: