如何在角材料表上收听keydown事件

时间:2018-03-15 16:22:32

标签: angular angular-material keyboard-events

我想听一下angular-material表上的键盘事件来操作选定的行。我试过了这个指令:

@Directive({
    selector: '[keyDownAction]'
})
export class KeyDownDirective {
    constructor() {
    }

@HostListener('keydown', ['$event'])
handleClick(event: Event) {
    console.log(event);
}

}

主持人倾听:

  host: { '(keydown)': 'hotkeys($event)' },

并指示:

    <mat-row *matRowDef="let row; columns: displayedColumns; let i=index"
             [focus]="selectedRow==i"
             (click)="clickOnRow(row, $event, i)"
             (dblclick)="dblClickOnRow(row, $event, i)"
             (keydown)="keyDownFunction($event)"
             >

click和dblclick工作。

有人知道解决方法吗?

1 个答案:

答案 0 :(得分:2)

我知道这是一个很晚的答案,但是对于这个问题的未来发现者...

不是<input>的任何事物都需要tabindex属性,以便触发keydown事件。任何索引号都可以。只需将您的代码更改为...

<mat-row *matRowDef="let row; columns: displayedColumns; let i=index"
         tabindex=0
         [focus]="selectedRow==i"
         (click)="clickOnRow(row, $event, i)"
         (dblclick)="dblClickOnRow(row, $event, i)"
         (keydown)="keyDownFunction($event)"
>