angular - 检测 Angular Material 垫选择列表中的键盘导航

Question

我想在项目之间导航时使用键盘箭头执行一些操作。

我应该实现什么事件吗？单击 ENTER 会触发 selectionChange，但我想在按箭头导航时激活该功能。

<mat-selection-list #list (selectionChange)="selectionChange($event, list.selectedOptions)">
  <mat-list-option (mouseenter)="showEditIcon(true, i)" (mouseleave)="showEditIcon(false, i)"
                   *ngFor="let lotItem of lotList; let i = index;"
                   (click)="showLotDetails(lotItem, i)"
                   [value]='lotItem'>

Answer 1

您可以在 mat-selection-list 上使用 keydown 键盘事件来调用您的selectionChange() 方法。您需要添加 (keydown.arrowup) 和 (keydown.arrowdown) 事件处理程序。

<mat-selection-list #list 
       (selectionChange)="selectionChange($event, list.selectedOptions)"
       (keydown.arrowup)="selectionChange($event)" 
       (keydown.arrowdown)="selectionChange($event)">

    <mat-list-option (mouseenter)="showEditIcon(true, i)" (mouseleave)="showEditIcon(false, i)"
                   *ngFor="let lotItem of lotList; let i = index;"
                   (click)="showLotDetails(lotItem, i)"
                   [value]='lotItem'>

这是一个StackBlitz Demo .