时间戳

首页 > 解决方案 > 如何使用 ng-deep 处理动态数据

angular - 如何使用 ng-deep 处理动态数据

问题描述

我需要为给定的类动态定义字体大小，但它们的值是从服务器获取的。静态看起来像这样：

::ng-deep .text-huge {
   font-size: 2.8em; 
}

如何转换它以使分配的值是动态的？

::ng-deep .text-huge {
   font-size: data.fontSize; 
}

感谢您的帮助

标签： angular

解决方案

您不能从 TS 分配 CSS 变量的值。

在Angular 7中设置sass变量值

您可以做的是在您的项目中使用 CSS 变量，这些变量会被 TS 文件修改为某个值：

CSS：

::root {
  --some-var: #fff;
}

.your-class {
  color: var(--some-var);
}

在 ts 中：

// Assuimg that new value is an HEX color without `#`
public changeSomeVar(newValue: string): void {
  document.documentElement.style.setProperty('--some-var', #${newValue});
}

推荐阅读