Angular 角度主题化

我希望在我的Angular（5）webapp中实现一个主题。我并不是所有东西都使用角度材质（即，我只使用输入字段和某些组件）

我正在寻找一个主题解决方案，我可以在运行时使用/控制/更改，而不必重新编译我的应用程序

我使用SCSS/Sass

我目前所做的：（在一个非常基本的示例中）

变量.scss

$color-1: #fff;
$color-2: #000;

测试组件/test-component.scss

@import "../variables.scss";

.test {
    color: $color-1;
    border: 1px solid $color-2;
}

自从我开始在我的应用程序上开发以来，我只是给SCSS变量赋值并使用它们，但接下来我想实现一个像样的主题化解决方案，在运行时我可以控制主题，因为变量只在编译时设置

我研究过的其他事项：

我发现这似乎是一个很好的实现方法，但是在组件级别，我不完全确定它会有多有效，因为深度嵌套的组件无法看到路由器周围的a类容器是什么

还有其他想法吗？只是重申一下，我不是想修改我的主题

编辑1:

我来了，明天早上会做一些编码，看看我能用它做些什么。

Eureka

因此，我最终制定的解决方案非常有效，允许我轻松地修改我想要主题化的每个组件的现有sas

我采用了所使用的概念，并修改了helper函数，以满足您可能希望在主题中查找的任意数量的键（而不是像示例中那样仅查找两个级别）

为了让它像我一样在Angular应用程序的上下文中工作，我使用了选择器：

@mixin theme-this($themes: $themes) {
    @each $theme-name, $theme in $themes {
        :host-context(.theme-#{$theme-name}) & {
            $theme-map: $theme !global;

            @content;

            $theme-map: null !global;
        }
    }
}

然后，在基本组件中，使用相关主题类（.theme-x）将所有内容包装在一个div中，任何生成的CSS，以及与当前应用于基本组件的类相匹配的类，都将自动在浏览器中呈现

像这样处理主题的一个很酷的地方是，您可以在运行时更改它

我添加了一个主题服务来包含当前选择的主题，稍后我将对其进行修改，以将主题存储在浏览器本地存储/用户cookie/等中