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

最新推荐文章于 2023-09-25 07:52:14 发布

JackLi0812

最新推荐文章于 2023-09-25 07:52:14 发布

阅读量2.2k

点赞数 1

分类专栏： WEB 文章标签： Angular 键盘按下事件 OnKeyDown事件

本文链接：https://blog.csdn.net/DreamLi1314/article/details/79660322

版权

WEB 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在模板页面通过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; 
 
    } 
 
  }