使用环境变量在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功能。将 public static float spToPx(Context ctx,float sp){ return sp * ctx.getResources().getDisplayMetrics().scaledDensity; } public static float pxToDp(final Context context, final float px) { return px / context.getResources().getDisplayMetrics().density; } public static float dpToPx(final Context context, final float dp) { return dp * context.getResources().getDisplayMetrics().density; } 应用于您的根组件，例如selectedTheme。然后在任何子组件中使用它：

app.component

Answer 2

知道了，我将app.component.html包裹在div中。