Angular基于Mat-Select实现按钮触发式CDK下拉筛选组件需求

问题概述 #

需要实现可复用的下拉筛选组件，通过按钮触发Mat-Select下拉面板，隐藏原生输入框，要求使用CDK Overlay避免页面偏移。当前遇到的问题：

• 隐藏输入框后下拉面板无法正常显示
• CSS样式无法隐藏Mat-Select的输入元素
• 下拉面板未正确定位在触发按钮下方

解决思路 #

• 弃用hidden属性：hidden会让元素脱离文档流，破坏CDK Overlay的定位逻辑，改用CSS的visibility: hidden+绝对定位隐藏元素但保留布局参考
• 绑定Overlay锚点：通过MatSelect的overlayOrigin属性，将下拉面板的定位锚点直接绑定到触发按钮
• 批量处理动态实例：用ViewChildren替代ViewChild获取循环生成的所有MatSelect实例，支持多组动态筛选器
• 优化事件绑定：使用MatSelect的selectionChange统一处理选择结果，替代单个mat-option的点击事件，提升多选场景的可靠性

修改后的代码实现 #

HTML代码 #

<mat-card class="reusable-filter-mat-card">
  <mat-card-content *ngIf="dropDownFilterConfig?.enabled || checkBoxFilterConfig?.enabled" class="parent-filter-style">
    <!-- 多选筛选器组 -->
    <ng-container *ngFor="let checkbox of checkBoxFilterConfig.config; let i = index">
      <button mat-button #filterButton (click)="toggleCheckBox(i)">
        <mat-icon class="material-symbols-outlined">instant_mix</mat-icon>
        {{checkbox.title}}
        <!-- 可选：显示已选数量 -->
        <span *ngIf="selectedCheckbox[i]?.length > 0" class="badge">{{selectedCheckbox[i].length}}</span>
      </button>
      <!-- 隐藏mat-form-field但保留定位参考 -->
      <mat-form-field class="hidden-form-field">
        <mat-select 
          [(value)]="selectedCheckbox[i]" 
          multiple
          [overlayOrigin]="filterButton"
          #checkBoxFilter
          (selectionChange)="onCheckboxSelectionChange($event, checkbox)">
          <ng-container *ngFor="let option of checkbox.data">
            <mat-option [value]="option">
              <div *ngIf="checkbox.displayProperty; else stringProperty">
                {{option[checkbox.displayProperty]}}
              </div>
              <ng-template #stringProperty>
                {{option}}
              </ng-template>
            </mat-option>
          </ng-container>
        </mat-select>
      </mat-form-field>
    </ng-container>

    <!-- 单选下拉筛选器组（可选） -->
    <ng-container *ngFor="let dropdown of dropDownFilterConfig.config; let i = index">
      <button mat-button #dropdownButton (click)="toggleDropDown(i)">
        <mat-icon class="material-symbols-outlined">arrow_drop_down</mat-icon>
        {{dropdown.title}}
        <span *ngIf="selectedDropDown[i]" class="selected-value">{{selectedDropDown[i][dropdown.displayProperty]}}</span>
      </button>
      <mat-form-field class="hidden-form-field">
        <mat-select 
          [(value)]="selectedDropDown[i]"
          [overlayOrigin]="dropdownButton"
          #dropDownFilter
          (selectionChange)="onDropdownSelectionChange($event, dropdown)">
          <ng-container *ngFor="let option of dropdown.data">
            <mat-option [value]="option">
              <div *ngIf="dropdown.displayProperty; else dropdownString">
                {{option[dropdown.displayProperty]}}
              </div>
              <ng-template #dropdownString>
                {{option}}
              </ng-template>
            </mat-option>
          </ng-container>
        </mat-select>
      </mat-form-field>
    </ng-container>
  </mat-card-content>
</mat-card>

TS代码 #

import { Component, EventEmitter, Input, OnInit, Output, ViewChildren, QueryList } from '@angular/core';
import { CheckBoxFilterConfig, DropDownFilterConfig, FilterOutput } from './reusable-filter.interface';
import { MatSelect } from '@angular/material/select';
import { MatOptionSelectionChange } from '@angular/material/core';

@Component({
  selector: 'reusable-filter',
  templateUrl: './reusable-filter.component.html',
  styleUrls: ['./reusable-filter.component.scss']
})
export class ReusableFilterComponent implements OnInit {
  @Input() dropDownFilterConfig!: DropDownFilterConfig;
  @Input() checkBoxFilterConfig!: CheckBoxFilterConfig;
  @ViewChildren('checkBoxFilter') checkBoxFilters!: QueryList<MatSelect>;
  @ViewChildren('dropDownFilter') dropDownFilters!: QueryList<MatSelect>;
  @Output() filterOutput = new EventEmitter<FilterOutput>();

  selectedCheckbox: any[][] = [];
  selectedDropDown: any[] = [];
  appliedFilters: FilterOutput = {
    dropDownFilter: [],
    checkBoxFilter: []
  };

  ngOnInit(): void {
    // 初始化对应每个筛选器的选中数组
    if (this.checkBoxFilterConfig?.config) {
      this.selectedCheckbox = new Array(this.checkBoxFilterConfig.config.length).fill([]);
    }
    if (this.dropDownFilterConfig?.config) {
      this.selectedDropDown = new Array(this.dropDownFilterConfig.config.length).fill(null);
    }
  }

  // 切换多选筛选器面板
  toggleCheckBox(index: number): void {
    const select = this.checkBoxFilters.get(index);
    select?.toggle();
  }

  // 切换单选下拉面板
  toggleDropDown(index: number): void {
    const select = this.dropDownFilters.get(index);
    select?.toggle();
  }

  // 处理多选筛选器选择事件
  onCheckboxSelectionChange(event: MatOptionSelectionChange, config: any): void {
    const index = this.checkBoxFilterConfig.config.indexOf(config);
    this.appliedFilters.checkBoxFilter[index] = this.selectedCheckbox[index];
    this.emitFilters();
  }

  // 处理单选下拉选择事件
  onDropdownSelectionChange(event: any, config: any): void {
    const index = this.dropDownFilterConfig.config.indexOf(config);
    this.appliedFilters.dropDownFilter[index] = event.value;
    this.emitFilters();
  }

  // 输出筛选结果
  emitFilters(): void {
    this.filterOutput.emit({...this.appliedFilters});
  }
}

SCSS样式代码 #

.reusable-filter-mat-card {
  padding: 8px;
  .parent-filter-style {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
  }

  .hidden-form-field {
    // 隐藏元素但保留定位参考
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;

    // 彻底隐藏原生选择器触发区
    ::ng-deep .mat-select-trigger {
      display: none;
    }
  }

  .badge {
    background-color: #1a73e8;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    margin-left: 4px;
  }

  .selected-value {
    margin-left: 4px;
    font-weight: 500;
  }
}

关键说明 #

1. 定位修复：通过[overlayOrigin]将下拉面板锚定到触发按钮，确保面板始终显示在按钮正下方
2. 隐藏逻辑：用visibility: hidden替代hidden属性，保留元素的布局位置，避免CDK Overlay失去定位参考
3. 动态支持：ViewChildren配合循环索引实现多组筛选器的独立控制，完全适配动态配置需求
4. 事件优化：统一使用selectionChange事件处理选择结果，避免单个选项点击事件的逻辑冗余

内容的提问来源于stack exchange，提问作者Andre du Toit