如何禁用Angular Material多选下拉框的Ctrl+A全选功能？

问题背景 #

使用Angular Material的mat-select实现了带筛选功能的多选下拉框，允许用户选择国家/州/城市等选项，需要阻止Ctrl+A触发全选操作。已尝试在内部搜索input上绑定(keydown.control.a)="$event.stopPropagation()"，但无效果。

有效解决方案 #

方案1：直接在mat-select上绑定拦截事件 #

Ctrl+A的全选逻辑由mat-select本身处理，因此需要在该组件上直接拦截事件并阻止默认行为：

修改你的mat-select标签，添加按键事件绑定：

<mat-select [formControl]="areas" 
            (selectionChange)="onOptionSelected('areas', $event)" 
            (closed)="resetTextFilter('areas')" 
            multiple
            (keydown.control.a)="$event.preventDefault(); $event.stopPropagation()">
  <!-- 内部input、选项组等内容保持不变 -->
</mat-select>

核心逻辑：preventDefault()阻止浏览器默认全选行为，stopPropagation()避免事件冒泡触发Angular Material内置的全选逻辑。

方案2：组件类中用HostListener全局监听 #

如果模板绑定不够灵活，可以在组件类中监听全局按键事件，限定仅拦截当前组件内的mat-select触发的Ctrl+A：

import { Component, HostListener, ElementRef } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class AreaFilterComponent {
  constructor(private el: ElementRef) {}

  @HostListener('keydown.control.a', ['$event'])
  handleCtrlA(event: KeyboardEvent) {
    const targetMatSelect = this.el.nativeElement.querySelector('mat-select');
    // 仅当事件来自当前组件的下拉框时拦截
    if (targetMatSelect && targetMatSelect.contains(event.target as Node)) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
}

方案3：自定义指令（多组件复用） #

如果多个下拉框都需要禁用Ctrl+A，可封装自定义指令实现复用：

1. 创建指令文件：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[disableMatSelectCtrlA]'
})
export class DisableMatSelectCtrlADirective {
  @HostListener('keydown.control.a', ['$event'])
  onCtrlA(event: KeyboardEvent) {
    event.preventDefault();
    event.stopPropagation();
  }
}

2. 在mat-select上使用指令：

<mat-select [formControl]="areas" 
            ... 
            multiple
            disableMatSelectCtrlA>
  <!-- 内容不变 -->
</mat-select>

为什么原有方案无效？ #

之前绑定在搜索input上的事件仅能拦截input框内的文本全选，而mat-select的多选全选逻辑是监听整个下拉面板的按键事件，因此需要在mat-select或其上层元素绑定事件才能生效。

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