javascript - 使用环境变量动态更改 Angular 6 中的样式

Question

我正在尝试使用环境变量在 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 应用程序的主体，这样我就可以避免将类添加到每个组件。

Answer 1

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

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