Question

我想知道是否有一个角度库可以直观地显示在按下ALT键时将哪些accesskeys指定给哪些html元素。

我可以使用下面的方法捕获键盘事件并实现一些功能，但检查是否有更好的方法或库可以完成我想要的工作。

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.altKey) {
  // ...
 }
}

Answer 1

Angular提供了一个很好的高级API来监听keydown事件。您无需访问$event。您可以在keydown.ACCESS_KEY.KEY定义中使用HostListener语法。像这样：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[altKey]',
})
export class AltKeyDirective  {
  @HostListener('keydown.p') onP() {
    console.log('p pressed');
  }

  @HostListener('keydown.alt') onAlt() {
    console.log('alt pressed');
  }

  @HostListener('keydown.alt.p') onAltP() {
    console.log('alt+p pressed');
  }
}

Live demo

还有Renderer2类listen方法，其定义如下：

listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void

Renderer2 docs

AccessKey荧光笔角度库

1 个答案: