Question

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

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

因此，尽管拦截此类事件非常容易，但我根本不知道如何以编程方式产生一个事件。

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

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

Answer 1

方法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上获得。

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

1 个答案: