如何用Angular Material普通按钮实现按钮组切换选中效果

要实现类似Button Toggle的单选交互，同时保留普通Angular Material按钮的所有样式，只需维护一个选中状态变量，通过绑定样式属性控制按钮切换效果，具体步骤如下：

1. 组件类中添加状态管理与点击逻辑 #

在组件的.ts文件里，新增变量记录当前选中按钮，再添加点击事件处理函数：

buttonNames: string[] = ['1', '2', '3', '4'];
selectedButton: string | null = null;

onButtonClick(button: string): void {
  this.selectedButton = button;
}

2. 模板中绑定样式与点击事件 #

在HTML模板里，可通过两种方式实现选中状态切换：

方式一：使用Angular Material内置颜色

直接绑定组件库的color属性，复用主题色体系：

<button 
  mat-raised-button 
  *ngFor="let num of buttonNames"
  [color]="selectedButton === num ? 'primary' : 'default'"
  (click)="onButtonClick(num)"
>
  {{ num }}
</button>

点击按钮时，选中项应用primary主题色，未选中项保持default样式，完全保留mat-raised-button的默认样式特性。

方式二：自定义选中样式

如果需要个性化样式，用ngClass绑定自定义类：

<button 
  mat-raised-button 
  *ngFor="let num of buttonNames"
  [ngClass]="{'active-btn': selectedButton === num}"
  (click)="onButtonClick(num)"
>
  {{ num }}
</button>

然后在组件的.css文件中定义样式：

.active-btn {
  background-color: #1976d2; /* 可替换为自定义颜色 */
  color: #fff;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

效果说明 #

点击任意按钮后，该按钮切换为选中样式，之前选中的按钮自动恢复默认状态，实现你需要的单选切换交互，同时保留普通按钮的全部样式。

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