Angular中如何实现点击按钮时修改按钮background-color背景色

提供两种可直接用的实现方式，按需选择：

方式一：直接操作传入的模板引用（简单快速） #

你已经在点击事件里传入了#LABEL模板引用，直接在ts文件补充对应方法即可，注意先导入依赖：

// p.component.ts 顶部先导入类型
import { ElementRef } from '@angular/core';

// 类内部补充方法
applyFilterActivite(btnEl: ElementRef) {
  // 如果需要单选高亮效果，先重置所有按钮为默认背景，不需要可以删掉这一段
  document.querySelectorAll('button.p, button.ve, button.o').forEach(btn => {
    (btn as HTMLElement).style.backgroundColor = '#fff'; // 替换为你自己的默认背景色
  });
  // 修改当前点击按钮的背景色
  (btnEl.nativeElement as HTMLElement).style.backgroundColor = '#1677ff'; // 替换为你需要的高亮色值
}

方式二：状态绑定（符合Angular最佳实践，推荐） #

无需直接操作DOM，通过数据驱动样式，后续维护更灵活：

第一步：修改ts文件的act数组，新增选中状态字段 #

// p.component.ts
this.act = [
  {
    id: 'p',
    label: 'P',
    isActive: false // 新增选中状态标识
  },
  {
    id: 've',
    label: 'VE',
    isActive: false
  },
  {
    id: 'o',
    label: 'O',
    isActive: false
  },
];

第二步：修改html模板，绑定样式与点击逻辑 #

<!-- app.component.html -->
<button 
  #LABEL 
  *ngFor="let filtre of act" 
  id="{{filtre.id}}" 
  class="{{filtre.id}}"
  [attr.data-label]="filtre.label"
  (click)="applyFilterActivite(filtre)"
  [style.backgroundColor]="filtre.isActive ? '#1677ff' : '#fff'" <!-- 替换为对应色值即可 -->
  value="{{filtre.label}}"
>
  {{filtre.label}}
</button>

第三步：修改ts里的点击方法 #

applyFilterActivite(selectedFiltre: typeof this.act[0]) {
  // 全部重置为未选中状态
  this.act.forEach(item => item.isActive = false);
  // 把当前点击的项设为选中
  selectedFiltre.isActive = true;
  // 保留你原有过滤业务逻辑即可
}

如果需要同时修改多个样式，也可以把行内样式绑定换成类名绑定：[class.active]="filtre.isActive"，然后在对应css文件里写.active类的样式即可。

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