如何让Angular Material选项组名称支持选中？可接受替代方案

当然可以实现！Angular Material自带的mat-option-group默认确实是不可选中的纯分组容器，但我们有两种简便的方案来达成你的需求——让顶层分组本身可选中，同时保留子选项的独立可选功能，而且顶层选中不会自动勾选所有子项。

方案一：将顶层分组包装为mat-option（推荐） #

这是最简洁的方案，直接复用mat-option的原生选中逻辑和样式，不需要额外处理事件状态。核心思路是把每个顶层分组同时作为一个mat-option，内部嵌套原有的子选项组。

示例代码 #

<mat-select [(value)]="selectedValues" multiple placeholder="选择宝可梦/类型">
  <!-- 顶层可选中的"火系"分组 -->
  <mat-option [value]="'type-fire'">
    火系宝可梦
    <mat-option-group label="具体宝可梦">
      <mat-option [value]="'charizard'">喷火龙</mat-option>
      <mat-option [value]="'blaziken'">火焰鸡</mat-option>
    </mat-option-group>
  </mat-option>

  <!-- 顶层可选中的"水系"分组 -->
  <mat-option [value]="'type-water'">
    水系宝可梦
    <mat-option-group label="具体宝可梦">
      <mat-option [value]="'gyarados'">暴鲤龙</mat-option>
      <mat-option [value]="'blastoise'">水箭龟</mat-option>
    </mat-option-group>
  </mat-option>
</mat-select>

样式微调（可选） #

默认情况下，嵌套的mat-option-group会有额外缩进，我们可以通过CSS调整到和原生分组一致的视觉效果：

/* 调整子选项组的缩进，匹配原生样式 */
.mat-option .mat-option-group {
  padding-left: 24px;
}
/* 去掉子选项组标题的加粗，避免和顶层选项混淆 */
.mat-option .mat-option-group-label {
  font-weight: normal;
}

方案二：给原生mat-option-group添加点击选中逻辑 #

如果你不想改变原有HTML结构，可以通过手动绑定点击事件、维护选中状态来实现。这个方案需要自己处理选中状态和样式，但不需要修改分组的嵌套关系。

示例代码 #

HTML部分

<mat-select [(value)]="selectedValues" multiple #selectRef>
  <mat-option-group 
    label="火系宝可梦" 
    (click)="toggleGroup('type-fire', selectRef)"
    [class.selected-group]="selectedValues.includes('type-fire')"
  >
    <mat-option [value]="'charizard'">喷火龙</mat-option>
    <mat-option [value]="'blaziken'">火焰鸡</mat-option>
  </mat-option-group>

  <mat-option-group 
    label="水系宝可梦" 
    (click)="toggleGroup('type-water', selectRef)"
    [class.selected-group]="selectedValues.includes('type-water')"
  >
    <mat-option [value]="'gyarados'">暴鲤龙</mat-option>
    <mat-option [value]="'blastoise'">水箭龟</mat-option>
  </mat-option-group>
</mat-select>

TypeScript部分

import { Component } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'app-pokemon-select',
  templateUrl: './pokemon-select.component.html',
  styleUrls: ['./pokemon-select.component.css']
})
export class PokemonSelectComponent {
  selectedValues: string[] = [];

  toggleGroup(groupValue: string, select: MatSelect) {
    const index = this.selectedValues.indexOf(groupValue);
    if (index > -1) {
      // 移除已选中的分组值
      this.selectedValues.splice(index, 1);
    } else {
      // 添加新选中的分组值
      this.selectedValues.push(groupValue);
    }
    // 手动触发select的value更新
    select.value = [...this.selectedValues];
  }
}

样式部分

让分组标题看起来像可点击的选项，并添加选中状态样式：

/* 让分组标题可点击 */
.mat-option-group-label {
  cursor: pointer;
}
/* 选中时的样式，匹配原生mat-option */
.selected-group .mat-option-group-label {
  color: #1976d2;
  font-weight: 500;
}

方案对比 #

• 方案一：代码更简洁，完全复用Angular Material的原生逻辑，无需手动维护状态，推荐优先使用。
• 方案二：适合原有结构无法修改的场景，但需要自己处理状态同步和样式，代码量稍多。

两种方案都能实现「顶层分组独立可选中、子选项保留可选功能、顶层选中不关联子选项」的需求，你可以根据自己的项目场景选择。

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