Angular：垫卡键盘导航答案

【问题标题】：Angular: Mat-card keyboard navigationAngular：垫卡键盘导航
【发布时间】：2021-03-19 15:19:09
【问题描述】：

我正在尝试制作可通过键盘导航的垫卡。现在，当按下tab 时，元素被聚焦，但是按下enter 时不会触发重定向事件（应该与点击事件相同）。

我已经尝试过 keydown.enter 和 onKeyDown（来自 a11y 包），但到目前为止没有成功。

HTML

<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
            [ngClass]="'background-'+index" (mouseout)="mouseOver=false"
    (mouseover)="mouseOver=true" style="padding: none; margin: 5px">

打字稿

  addQueryParam(groupName) {
    this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
  }

知道如何解决这个问题吗？

TIA, 伊莎贝拉

【问题讨论】：

标签： angular-material accessibility keyboard-events

【解决方案1】：

我建议你两件事：

尝试使用(keyup.enter)=...。我用了几次，效果很好
如果这不起作用，请尝试使用 (keyup) 或 (keydown) 并在您的函数中检查密钥代码是否为 13（输入密钥代码），如下所示：

HTML

<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
            [ngClass]="'background-'+index" (mouseout)="mouseOver=false"
    (mouseover)="mouseOver=true" style="padding: none; margin: 5px">

打字稿：

addQueryParam($event, groupName) {
if($event.keyCode === 13){
    this.router.navigate(['/data'], { queryParams: ...);
 }
}

如果我没记错的话，您可以在event.type 之类的字段中检查事件的类型。

另外查看这个讨论，因为这些函数没有很好的文档记录，在这里你可以找到一些信息： What are the options for (keyup) in Angular2?

编辑

我还发现了这篇非常有用的文章：https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee

【讨论】：