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

Question

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

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

我可以停止整个交互，但我想要的是：
保留所有键盘交互，除了 SPACE 一个

有办法吗？
谢谢。

Answer 1

如果您查看 source code，您会发现键是硬编码的。因此，您不能轻易覆盖它们。

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

Answer 2

考虑Georg-un的回答

但是，如果有充分的理由，您总是可以“re-writte”该功能。

在 select

中使用模板引用变量

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

并且可以使用ViewChild获取垫子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);
      }
    };
  }

注意：SPACE 在

中定义

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>

一如既往，如果我们使用 as "selector" 代替 [no-space] mat-select

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

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

查看带有指令

的stackblitz

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

Angular: When using mat-select , Is there a way to not select the focused item when I press SPACE button?

angular-material

angular

mat-select

mat-option