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