Question

在运行时设计Angular应用程序的最佳做法是什么？（例如，用户特定的原色）应用正在为不同的公司运行，并且每个公司都希望在应用设置中设置其公司设计颜色（免费，没有预定义的颜色代码）。

第一个想法：使用较小的变量并在运行时进行更改。但是Angular将它们转换为静态CSS。

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

第三个想法： Angular和jQuery并没有什么好朋友，但是有相当于 $('.primary-color').css({color=styleService.primaryColor})？

有更好的方法吗？也许是一个可以操作CSS的Angular兼容框架，这样我就可以使用简单的类来进行HTML修饰，并使用一个应用了用户特定样式值的中央服务？

Answer 1

您可以执行类似this stackblitz的操作：基本上，您创建了一条指令，该指令应用于将更改颜色的元素，并将用户颜色存储在某个位置（本地存储，数据库...）。

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

我发现它比使用SASS更灵活，并且您可以从中学到一两个关于Angular的知识。

Answer 2

我正在使用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
}

在运行时样式化Angular应用

2 个答案: