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

Question

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

我应该实施什么事件吗？单击 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

您可以使用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 演示。