时间戳

首页 > 解决方案 > 如何在 Angular 5 中生成全局 DOM keyPress 事件？

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

问题描述

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

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

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

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

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

标签： angular

解决方案

方法 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);
  }

方法 1的完整代码可在stackblitz中找到。

方法2：使用@HostListener()

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

方法 2的完整代码可在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上找到。

推荐阅读