角度:板卡键盘导航

Question

我正试着用键盘做一张可以导航的垫片.现在，当按下tab时，元素将被聚焦，但是当按enter时不会触发重定向事件(应该与单击事件相同)。

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

<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' });
  }

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

蒂亚伊莎贝拉

Answer 1

我建议你两件事：

1. 尝试使用(keyup.enter)=...。我使用过它几次，它运行得很好，

，

1. ，如果不起作用，尝试使用(keyup)或(keydown)，在函数中检查键代码是否为13 (输入键代码)，如下所示：

<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之类的字段中检查事件的类型。

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

编辑

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