在角材垫选择列表中检测键盘导航

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

您可以在 keydown 上使用 mat-selection-list 键盘事件来呼叫您的 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。