Ionic 2中如何实现一组按钮的单选激活（仅一个按钮高亮）

嘿，这个单选激活的需求很容易搞定，结合Angular的数据绑定和Ionic按钮就能实现，我给你一步步拆解：

1. 模板（HTML）部分 #

首先修改你的按钮组，给每个按钮绑定点击事件，同时通过条件判断添加激活类：

<ion-button 
  round 
  (click)="selectButton('David')" 
  [class.active]="selectedButton === 'David'"
>
  David
</ion-button>
<ion-button 
  round 
  (click)="selectButton('Rocky')" 
  [class.active]="selectedButton === 'Rocky'"
>
  Rocky
</ion-button>
<ion-button 
  round 
  (click)="selectButton('Chris')" 
  [class.active]="selectedButton === 'Chris'"
>
  Chris
</ion-button>
<ion-button 
  round 
  (click)="selectButton('Johny')" 
  [class.active]="selectedButton === 'Johny'"
>
  Johny
</ion-button>

2. TypeScript组件逻辑 #

在你的组件类里定义一个变量记录当前选中的按钮，再写一个点击事件处理方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component', // 替换成你实际的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponentComponent {
  // 初始可以设为null（无默认选中），或者默认选中第一个按钮比如'David'
  selectedButton: string | null = null;

  selectButton(buttonName: string) {
    // 点击时更新选中的按钮名称
    this.selectedButton = buttonName;
  }
}

3. 样式（CSS/SCSS）部分 #

最后给激活状态的按钮添加背景色样式，确保优先级覆盖Ionic默认样式：

ion-button.active {
  background-color: #1677ff; // 换成你想要的激活背景色
  color: white; // 可选：调整激活状态下的文字颜色
}

逻辑说明 #

核心思路就是用selectedButton变量记录当前选中的按钮标识，每次点击按钮时更新这个变量。模板里通过[class.active]的条件绑定，只有当按钮名称和selectedButton匹配时，才会给按钮加上激活类，这样就保证了同一时间只有一个按钮处于激活状态。

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