Angular 6 中使用环境变量动态改变样式答案

【问题标题】：Dynamically changing styles in Angular 6 using Environment VariableAngular 6 中使用环境变量动态改变样式
【发布时间】：2026-01-06 13:05:01
【问题描述】：

我正在尝试使用环境变量在 Angular 6 中动态更改样式。

我能做到，

这是我的文件结构的样子：

src
 -app
 -assets
 -environments
 -scss
  -theme1.scss
  -theme2.scss
  -_variables.scss
  -styles.scss

在我的 _variables.scss 中，我正在导入 theme1.scss 和 theme2.scss

在styles.scss中，我包含了_variables.scss

在 theme1.scss 和 theme2.scss 中，我将所有样式和变量都封装在一个类中。

例如：

.theme1{
 $input-btn-focus-width:0;
$input-btn-focus-color:transparent;
$input-btn-focus-box-shadow:none;
$primary-color: #0378C5!default; 
$primary-grad-start: #0269ad;

.logo {
   width: 150px;
 }

}

同样，theme2.scss 也会采用类似的方式。

在component.ts文件中，我将类名更改如下：

this.selectedTheme = environment.customer==""? "theme1": "theme2";

现在，问题是我必须用动态类包装每个组件。

例如：

<app-login [class]="selectedTheme"></app-login>

而且有这么多组件，我不想对每个组件都这样做。

有什么方法可以将这个 selectedTheme 动态添加到根元素，即 Angular 应用程序的主体，这样我就可以避免将类添加到每个组件中。

【问题讨论】：

在 Angular 6 中，在 angular.json 中，您可以使用“replacement”标签来替换两个文件（但它不是“在构建阶段的其他动态）。您可以使用 Shekhar 在 @ 987654321@
他的做法是添加一个 css 文件，但我无法使用 scss 文件，因为它没有被处理。
有多种方法可以做到这一点，但请让我看看我是否理解这一点。您有几个 CSS，每个 CSS 都有一组定义主题的样式。在您的代码中以某种方式您希望有可能在主题之间切换，但是您需要这样做只在一个地方应用“主题类”并且将应用到所有组件？

标签： javascript angular sass angular6

【解决方案1】：

您可以使用 Angular 的 host-context 功能。将selectedTheme 应用于您的根组件，例如app.component。然后在任何子组件中使用它：

\:host-context(.theme1) .logo
  width: 150px

【讨论】：

【解决方案2】：

知道了，我将 app.component.html 包装在一个 div 中。

【讨论】：

请接受一个答案，如果那是您正在寻找的答案 ;)
在发布后的两天内无法接受我自己的答案。