Angular中如何通过按钮点击动态切换元素CSS类样式

核心逻辑是通过布尔值标记当前模式状态，点击按钮时翻转状态，通过Angular的类绑定语法动态给.mainbody元素增删对应深色模式类，无需手动操作DOM。

修改组件TS代码 #

在组件类中新增深色模式状态标记和切换方法即可：

export class AppComponent {
  title = 'salesapp';
  // 深色模式状态标记，默认关闭
  isDarkMode = false;

  ngOnInit(){
  }

  // 切换明暗模式的方法
  toggleDarkMode(): void {
    this.isDarkMode = !this.isDarkMode;
  }
}

修改模板HTML代码 #

给按钮绑定点击事件，给.mainbody元素绑定动态类规则：

<div class="mainbody" [class.bgdark]="isDarkMode" [class.textlight]="isDarkMode">
  <button type="button" class="btn btn-primary" (click)="toggleDarkMode()">
    {{ isDarkMode ? '切换浅色模式' : '切换深色模式' }}
  </button>
</div>

注意：原代码按钮type写的submit，如果不是放在表单内做提交操作，建议改成button避免触发表单默认提交刷新页面的行为。

补充样式参考 #

你需要提前在全局样式或者组件样式中定义两个深色模式类的样式，可参考如下写法，加过渡属性可以让切换效果更自然：

.bgdark {
  background-color: #1e1e1e;
  transition: background-color 0.3s ease;
}
.textlight {
  color: #f0f0f0;
  transition: color 0.3s ease;
}

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