[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;

  }

}