Angular Material实现侧边栏仅展示选中选项的方法

实现步骤 #

• 拆分交互结构：不要直接复用mat-select默认的触发按钮区域（默认触发区仅支持展示单值/多选计数，无法满足自定义展示全部已选项的需求），将功能拆成侧边栏常驻已选展示区和隐藏的选择逻辑容器两部分，适配侧边栏有限的纵向空间。
• 编写自定义已选展示区：在侧边栏对应位置渲染用户已选中的选项，支持直接在展示区移除已选项，搭配触发选择的按钮：

<!-- 侧边栏常驻区域 -->
<div class="sidebar-select-container">
  <!-- 已选项展示 -->
  <div class="selected-list">
    <span *ngFor="let item of selectedValues" class="selected-chip">
      {{item.label}}
      <button mat-icon-button class="remove-btn" (click)="unselect(item.value)">
        <mat-icon>close</mat-icon>
      </button>
    </span>
  </div>
  <!-- 触发选择入口 -->
  <button mat-stroked-button (click)="triggerSelect()">
    <mat-icon>tune</mat-icon> 筛选选项
  </button>
</div>

• 挂载隐藏的mat-select实例：把实际承载选择逻辑的mat-select设为不可见，仅复用它的选项面板、选择状态管理能力，避免重复造轮子：

<!-- 隐藏的选择逻辑容器，不占页面空间 -->
<mat-select #selectInstance 
            [(value)]="selectedValues" 
            multiple
            style="display: none;">
  <mat-option *ngFor="let opt of allOptions" [value]="opt">
    {{opt.label}}
  </mat-option>
</mat-select>

• 组件类中补充对应逻辑，通过编程式方式打开选择面板：

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent {
  @ViewChild('selectInstance') selectRef!: MatSelect;
  // 所有可选项
  allOptions = [/* 自行填充你的选项数据，结构为{value: any, label: string} */];
  // 已选中的值
  selectedValues: Array<{value: any, label: string}> = [];

  triggerSelect() {
    // 编程式打开选择面板
    this.selectRef.open();
  }

  unselect(targetVal: any) {
    // 移除已选项
    this.selectedValues = this.selectedValues.filter(item => item.value !== targetVal);
  }
}

• 样式适配：给已选列表设置最大高度，超出时内部滚动，避免选项过多撑开侧边栏影响其他组件展示；已选项用紧凑的chip样式，减少空间占用。

注意事项 #

• 不要通过覆盖mat-select内部DOM结构的方式修改默认触发区的展示逻辑，Angular Material版本迭代时内部DOM可能调整，自定义样式容易失效，上述拆分方案兼容性更好。
• 单选场景只需移除mat-select上的multiple属性，将已选展示区的循环渲染改为单个值渲染即可。
• 如果需要选择面板固定在侧边栏内部而非全局悬浮，可以给mat-select传入自定义panelClass调整定位样式，默认全局悬浮层不会被侧边栏容器裁切，可直接使用。

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