在运行时设置 Angular 应用程序的样式

Question

在运行时设置 Angular 应用样式的最佳做法是什么？（p.e。用户特定的原色）该应用程序运行适用于不同的公司，每个公司都希望在应用程序设置中设置其公司设计颜色（免费，无预定义颜色代码）。

第一个想法：使用 less-variables 并在运行时更改它。但是 Angular 将它们转换为静态 css.

第二个想法：使用像这样的样式绑定：[style.color]=styleService.primaryColor 但是我必须在每个组件中实现它 -> 开销很大！

第三个想法： Angular 和 jQuery 不是好朋友，但有没有等价于 $('.primary-color').css({color=styleService.primaryColor})?

有没有更好的方法？也许是一个 Angular 兼容的框架，它可以操纵我的 CSS，所以我可以使用简单的类在 HTML 中进行装饰，以及应用用户特定样式值的中央服务？

Answer 1

我正在使用 SASS 所以我建议（如果你可以使用 sass）是使用全局 scss 变量文件，你可以在构建过程中更改它们（每个构建不同的颜色）。

// This is the global var .scss file

$primary-color: green;
$secondаry-color: yellow;
$error-color: red;

// This is your component scss
@import `${yourPath}/variables.scss`;

button {
  color: $primary-color
}

Answer 2

您可以做类似 this stackblitz 的事情：基本上，您创建一个指令，将其应用于将改变颜色的元素，并将用户颜色存储在某个地方（本地存储、数据库...）。

这样，您就可以控制 HTML 元素的许多属性。

我发现它比使用 SASS 更灵活，您可以通过它了解有关 Angular 的一两件事。

在运行时设置 Angular 应用程序的样式

Styling an Angular app at runtime

css

styling

less

angular