使用Angular Material主题服务切换样式后无法恢复默认值如何处理

问题根因 #

你当前的themeSwitch方法每次调用都固定传入green作为目标主题，没有判断当前主题状态做反向切换，所以只能切换到绿色主题，无法回到默认主题。

解决方案 #

完全可以把切换控制逻辑封装在主题服务内部，不需要组件维护主题状态，修改代码如下：

1. 修改主题服务

新增切换逻辑封装，也可以选择使用Angular官方推荐的Renderer2替代直接操作DOM，兼容性更强：

import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  currentTheme: string = 'defaultTheme';
  private readonly defaultTheme = 'defaultTheme';
  private readonly greenTheme = 'green';
  private renderer: Renderer2;

  constructor(rendererFactory: RendererFactory2) {
    // 服务中通过RendererFactory2创建Renderer2实例
    this.renderer = rendererFactory.createRenderer(null, null);
    this.switchColors(this.currentTheme);
  }

  switchColors(newColor:string) {
    this.renderer.removeClass(document.body, this.currentTheme);
    this.currentTheme = newColor;
    this.renderer.addClass(document.body, this.currentTheme);
  }

  // 封装切换逻辑，组件无需感知状态
  toggleTheme() {
    const targetTheme = this.currentTheme === this.defaultTheme ? this.greenTheme : this.defaultTheme;
    this.switchColors(targetTheme);
  }
}

如果你的项目不需要支持服务端渲染（SSR），也可以保留原来直接操作document.body.classList的写法，只新增toggleTheme方法即可，不需要修改switchColors的原有逻辑。

2. 修改组件ts文件

直接调用服务封装好的切换方法即可：

themeSwitch() {
  this.service.toggleTheme();
}

3. 原有CSS、HTML代码无需修改

修改完成后点击元素就可以在红色默认主题和绿色主题之间正常来回切换。

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