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

Question

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

我应该实施任何事件吗？ selectionChange 通过单击 ENTER 触发，但我想在通过箭头导航时激活该功能。

<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。