Angular实现点击按钮永久切换背景并取消其他按钮背景

要实现点击按钮后永久保留背景色，同时取消其他按钮的选中状态，本质是实现单选按钮组的视觉效果，我们可以通过组件状态结合Angular样式绑定来完成，具体步骤如下：

1. 组件类（.ts文件）修改 #

在组件类中添加变量记录当前选中的按钮索引，同时更新点击方法：

// 组件类代码
selectedTimeIndex: number = -1; // 初始无选中项

addTime(idx: number): void {
  this.selectedTimeIndex = idx; // 点击时更新选中索引
}

2. HTML模板修改 #

• 修正按钮type属性（radio是input标签类型，button标签应使用button类型）
• 用[ngClass]绑定选中样式，判断当前按钮索引是否为选中索引
• 点击事件直接传递索引，无需字符串插值

<div class="time-stamp">
  <label for="time" class="fw-bold label-text">Time</label>
  <div class="d-flex flex-wrap">
    <div *ngFor="let time of timeStamp; let idx=index">
      <button 
        type="button" 
        class="rounded-pill" 
        id="{{idx}}" 
        (click)="addTime(idx)"
        [ngClass]="{'active': selectedTimeIndex === idx}"
      > 
        {{time}}
      </button>
    </div>
  </div>
</div>

3. CSS样式修改 #

添加.active类定义选中状态的背景色，移除原有的:focus、:visited强制样式（类控制更稳定，避免样式冲突）：

button{
  border: 1px solid #9319FF;
  height: 24px;
  width: 88px;
  padding: 0;
  font-size: 13px;
  margin-right: 26px;
  margin-bottom: 10px;
  cursor: pointer; // 添加上手型光标，优化交互体验
  
  &:hover{
    background-color: #9319FF;
  }
  
  // 选中状态样式
  &.active{
    background-color: #9319FF;
    color: #fff; // 可选：添加文字白色，提升对比度
  }
}

效果说明 #

点击任意按钮后，该按钮会应用.active类的背景色，其他按钮的选中样式会自动移除，实现你需要的单选式永久选中效果。

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