Angular 6 创建动态 css 类答案

【问题标题】：Angular 6 create dynamic css ClassAngular 6 创建动态 css 类
【发布时间】：2019-07-20 19:22:02
【问题描述】：

我有在组件 HTML 文件中创建动态 css 类的问题...现在我正在使用这样的内联 css

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

使用角度功能......但我需要一个我应该动态更改属性的类。示例

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

如果您看到屏幕截图，则可以选择更改模板的颜色，所以我只需要在我的类属性中立即更新该颜色..

有可能吗？

【问题讨论】：

您不能将 ts value 分配给 css/scss 定义，但您可以使用 [ngStyle] 动态更改绑定到 ts 代码中定义的变量的 css 值。即：<div class="wrapper" [ngStyle]="{'color' : mapData.theme.bodyFontColor}"></div>

标签： angular angular6

【解决方案1】：

解决方法：您可以使用全局 css-class 来实现。例如。在 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 中使用全局样式）

【讨论】：

【解决方案2】：

是的，这是可能的，

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

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

【讨论】：

它不是一个解决方案.. 请检查我的问题...我想动态更改类属性.. .wrapper{ color: changecolor } changecolor 将从 ts 或从输入更改..跨度>
我明白了。使用 ngclass 和类函数 inaide 怎么样？在 calculateclass 你可以改变类的值并返回更新的类