Angular 6创建动态CSS类

Question

我在使用组件HTML文件创建Dynamic CSS类时遇到了问题...现在，我正在像这样使用内联CSS

<div class="" [style.color]="mapData.theme.bodyFontColor"></div>

使用角度功能..但我需要一个可以动态更改属性的类。 例子

.wrapper{
 color : mapData.theme.bodyFontColor;
 font-family: mapData.theme.bodyFontFamily;
}

如果您看到了屏幕截图，则可以更改模板的颜色，因此我只需要在我的class属性中立即更新该颜色即可。

有可能吗？

Answer 1

解决方法：您可以通过使用全局CSS类来实现。例如。在Angular-CLI中，我们可以在./src/styles.scss中定义全局类，在那里您可以使用默认值定义您的类，例如

.wrapper {
 color : black;
}

然后在组件.ts内，您可以使用以下方式直接访问文档样式来动态修改此类（对于标准angular-CLI styles.scss位于索引2-.styleSheets[2]，但它可以在不同的版本/项目中进行更改-还取决于index.html文件中先前定义的其他样式）

let wrapperClass = [...(<any>document.styleSheets[2]).cssRules]
                    .find(x=> x.selectorText=='.wrapper');

wrapperClass.style.color = mapData.theme.bodyFontColor;
wrapperClass.style['font-family'] = mapData.theme.bodyFontFamily

这样，您还可以访问伪元素，例如.wrapper:hover。您可以使用这种方法（直接访问文档样式）为整个前端加载（例如从数据库中）动态皮肤（在这种情况下，您不应该对组件使用本地样式，而应仅在./src/style.scss中使用全局样式）

Answer 2

是可以的，

<div [className]="'class' + someValue"></div

您可以为此使用class属性。检查 here 了解更多信息。