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

Question

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

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

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

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

谢谢你的帮助

Answer 1

You can't assign CSS variable's value from the TS.

Set sass variable value in Angular 7

你可以做的是在你的项目中使用 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});
}