Angular 2+ 如何为已有类通过代码设置主题样式？

嘿，我懂你的困扰——项目里已经有大量用.mybutton这类类名的组件，不想一个个去改，却想实现动态主题切换，之前直接在<style>里用插值绑定的方法没生效对吧？这是因为Angular的模板编译器默认不会处理<style>标签里的插值表达式，所以{{company?.buttonBackgroundColor}}根本没被解析成实际的颜色值。

下面给你两种不用替换已有类的可行方案，都是Angular项目里常用的：

方案一：CSS自定义属性（变量）+ Angular动态修改 #

这是最灵活的方案，只需要修改一次全局/组件样式，然后动态更新CSS变量的值即可：

1. 定义CSS变量并修改已有类的样式
   在全局styles.css（或者组件的样式文件里），给根元素定义变量，然后把.mybutton的背景色改成使用这个变量：

/* 全局styles.css */
:root {
  --button-bg-color: #cccccc; /* 默认背景色 */
}

.mybutton {
  background-color: var(--button-bg-color) !important;
  /* 其他已有样式保持不变 */
}

2. 在Angular中动态更新变量值
   可以通过Renderer2或者直接操作DOM的方式，修改根元素的CSS变量。比如在你的主题组件或者服务里：

import { Component, Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-theme-switcher',
  template: `
    <button class="mybutton" (click)="switchToBlueTheme()">蓝色主题</button>
    <button class="mybutton" (click)="switchToGreenTheme()">绿色主题</button>
  `
})
export class ThemeSwitcherComponent {
  constructor(
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  switchToBlueTheme() {
    this.renderer.setStyle(
      this.document.documentElement,
      '--button-bg-color',
      '#2196F3'
    );
  }

  switchToGreenTheme() {
    this.renderer.setStyle(
      this.document.documentElement,
      '--button-bg-color',
      '#4CAF50'
    );
  }
}

这样所有使用.mybutton的按钮都会自动切换背景色，完全不用修改原有按钮的代码。

方案二：根元素主题类 + 全局样式覆盖 #

这种方法是给根元素（比如<body>或<app-root>）添加不同的主题类，然后在全局样式里定义不同主题下已有类的样式：

1. 定义主题对应的全局样式
   在styles.css里添加：

/* 默认主题样式 */
.mybutton {
  background-color: #cccccc !important;
}

/* 蓝色主题 */
.theme-blue .mybutton {
  background-color: #2196F3 !important;
}

/* 绿色主题 */
.theme-green .mybutton {
  background-color: #4CAF50 !important;
}

2. 动态切换根元素的主题类
   在组件里通过操作DOM类列表来切换主题：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-theme-switcher',
  template: `
    <button class="mybutton" (click)="setTheme('blue')">蓝色主题</button>
    <button class="mybutton" (click)="setTheme('green')">绿色主题</button>
  `
})
export class ThemeSwitcherComponent {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  setTheme(theme: string) {
    // 先移除所有已有的主题类
    this.document.body.classList.remove('theme-blue', 'theme-green');
    // 添加当前选择的主题类
    this.document.body.classList.add(`theme-${theme}`);
  }
}

这种方法也不用修改原有组件的类，只需要维护全局的主题样式即可。

为什么你之前的方法不生效？ #

Angular的模板系统只会编译组件模板里的HTML元素和指令，<style>标签里的内容会被当作静态文本处理，所以插值表达式{{company?.buttonBackgroundColor}}不会被解析成实际的颜色值，最终浏览器看到的就是background-color: {{company?.buttonBackgroundColor}}!important;，这显然是无效的CSS。

内容的提问来源于stack exchange，提问作者daniel