[Angular] 键盘监听事件需要鼠标点击一下窗口才能监听到如何解决?

在模板页面通过onKeyDown或者HostListener设置键盘监听事件,当页面刷新时由于页面没有被激活导致无法监听到键盘事件,必须在页面上点一下以激活页面才能监听到键盘按下事件
处理方法: 通过 renderer2.listen 方法代替onKeyDown监听
实现:
1) 导入 Renderer2 和 NgZone
import {  Component,  OnDestroy,  OnInit,  Renderer2, NgZone  } from "@angular/core";

2) 声明 Listener 保存监听事件,当页面销毁时通过该引用注销监听
private keydownListener: () => void;

3) 在 ngInit 方法中注册监听
ngOnInit(): void {
      this.setKeydownListener();
      ...  
}

private setKeydownListener() {
   if(this.keydownListener == null) {
      t his.zone.runOutsideAngular(() => {
          this.keydownListener = this.renderer.listen(
             "document", "keydown", (e) => this.onKeydown(e));
      }) 
    }
}

private onKeydown(event: KeyboardEvent) {
    // do something
}

4) 在 destroy 方法中注销监听
ngOnDestroy() {
  this.removeKeydownListener();
}

private removeKeydownListener() {
  if(!!this.keydownListener) {
     this.keydownListener();
     this.keydownListener = null;
  }
}

你可能感兴趣的:(WEB)