如何在 Angular 5 中生成全局 DOM keyPress 事件？

Question

这个问题专门针对 Angular 5 环境。

在阅读了从ElementRef 到EventEmitter 的任何关于该主题的内容后，我仍然没有找到正确（简单？）的方法来简单地触发全局“文档范围” - 'keyPress' 或 'keyDown ' 就像我只需按下我的 [硬件] 键盘上想要的键即可获得的事件。

所以，虽然拦截这样的事件很容易，但我根本不知道如何以可编程的方式产生一个。

例如：我想要一个按钮，当我按下它时，会触发一个事件，相当于按下我的 [硬件] 键盘上的“2”键。

我该怎么做？ （请在 HTML 和 TS 文件中编写代码） 感谢您的帮助。

Answer 1

方法一：使用@Inject(DOCUMENT)

请在您的组件中@Inject(DOCUMENT)，然后浏览器Document 将被注入到角度组件中。

然后我们可以在这个文档范围内调用addEventListener("keydown", hadler_method)。

  public key: string;
  public keyCode: number;
  public altKey: boolean;
  public shiftKey: boolean;
  public ctrlKey: boolean;

  constructor(@Inject(DOCUMENT) public doc: Document){
    this.addEventListener();
  }

  addEventListener() {
    this.doc.addEventListener("keydown", this.handleEvent.bind(this))
  }
  handleEvent(event: KeyboardEvent){
    this.key = event.key;
      this.keyCode = event.keyCode;
      this.altKey = event.altKey || false;
      this.shiftKey = event.shiftKey || false;
      this.ctrlKey = event.ctrlKey || false;

      // To stop browser default behaviour
      event.preventDefault();
      // To stop event bubbling
      event.stopPropagation();
  }
  ngOnDestroy() {
    this.doc.removeEventListener("keydown", this.handleEvent);
  }

方法一的完整代码在stackblitz.

方法2：使用@HostListener()

  @HostListener('document:keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    this.handleEvent(event);
  }

方法二的完整代码可在stackblitz获取。

---

在文档范围内触发KeyboardEvent

triggerEvent(el: HTMLElement | Document | Window, type: string, initOptions = {}){
    let defaultoptions = {
      shiftKey: false,
      altKey: false,
      ctrlKey: false,
      cancelable : true,
      bubbles: true,
    };

    // Create a KeyBoard Event
    let event = new KeyboardEvent(type, Object.assign({}, defaultoptions, initOptions));

    // Dispatch event on "el" scope
    el.dispatchEvent(event);
  }

我们可以使用下面的代码来调用触发方法。

this.triggerEvent(document, "keydown", {
    key: "a",
    keyCode: 97
});

完整代码可在stackblitz 获得。