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

作者：我家小花儿 | 2024-03-12 07:32:40

踩

ag-grid-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; 
 
    } 
 
  }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/223009?site