angular - Angular：当使用 mat-select 时，当我按下 SPACE 按钮时，有没有办法不选择焦点项目？

Question

通过查看，https://v5.material.angular.io/components/select/overview
有几个键盘交互。

• 键盘交互
• DOWN_ARROW：关注下一个选项
• UP_ARROW：聚焦上一个选项
• ENTER 或 SPACE：选择焦点项目

我能够停止整个交互，但我想要的是：
保留所有键盘交互，除了空格键

有没有办法做到这一点？
谢谢你。

Answer 1

如果您查看源代码，您会发现密钥是硬编码的。因此，您不能轻易地覆盖它们。

除此之外，您可能无论如何都不应该覆盖它们，因为这会与可访问性冲突。

Answer 2

考虑到Georg-un的回答

但是，如果有一个很好的理由，您总是可以“重新编写”该功能。

在您的选择中使用模板引用变量

<mat-select #select="matSelect">
   ...
</mat-select>

并且可以使用 ViewChild 来获取 mat select 并重写函数

  @ViewChild('select', { static: true }) select: any;

  ngOnInit() {
    this.select._handleKeydown = (event: KeyboardEvent) => {
      if (event.keyCode==SPACE)
        return
      if (!this.select.disabled) {
        this.select.panelOpen
          ? this.select._handleOpenKeydown(event)
          : this.select._handleClosedKeydown(event);
      }
    };
  }

注意：空间定义在

import { SPACE} from '@angular/cdk/keycodes';

更新我们也可以使用指令

@Directive({
  selector: '[no-space]',
})
export class NoSpaceDirective {
  @Output('spacekeydown') spacekeydown: EventEmitter<any> =
    new EventEmitter<any>();
    
constructor(@Self() private select: MatSelect) {
    this.select._handleKeydown = (event: KeyboardEvent) => {
      if (event.keyCode == SPACE) {
          const active=this.select.panelOpen?
                 this.select.options.filter(x=>x.active)[0]|| null:
                 null
        this.spacekeydown.emit(active?active.value:null);
      } else {
        if (!this.select.disabled) {
          this.select.panelOpen
            ? (this.select as any)._handleOpenKeydown(event)
            : (this.select as any)._handleClosedKeydown(event);
        }
      }
    };
  }

}

你用 as

<mat-select no-space 
     (spacekeydown)="doSomething($event)">
   ...
</mat-select>

与往常一样，如果我们使用“选择器”来代替[no-space] mat-select

@Directive({
  selector: 'mat-select',
})
...

该指令适用于我们所有的 mat-select

使用指令查看stackblitz