angular - 如何防止或取消对全局按键事件的更改检测

Question

在 Chrome 中调试以查找我的应用程序响应缓慢的根源时，我注意到在性能选项卡中按住 Shift 键会生成重复的 keydown 事件，每一个都会触发 Angular 中的变化检测。下图显示了其中一个的性能选项卡。这些事件对我的应用程序没有用；我知道当 Shift 和 Ctrl 被自己按下时没有任何变化。我只想知道当点击事件发生时按键是否按下，或者当按下字符或功能键时。 “性能”选项卡中报告的额外事件也使我更难分析我的调试实际感兴趣的内容。

有没有办法阻止或取消对Shift 和Ctrl 等键的全局keydown 事件的更改检测？

Answer 1

我实际上实现了一个全局捕获 keydown 事件监听器来停止 keydown 事件的传播，但我在识别键时犯了一个错误。正确完成后，处理的 globalZoneAwareCallback 部分被消除(在问题图像的右侧)； globalZoneAwareCaptureCallback 部分保留。

---

解决方案是在全局事件监听器中停止 keydown 事件的传播，它本身不会触发更改检测:

• 在 keydown 事件上设置全局事件监听器(例如在服务中)
• 停止传播 Shift 和 Ctrl 键的事件
• 将对 window.document.addEventListener 的调用包装在 NgZone.runOutsideAngular 中。这很重要，因为 addEventListener 会触发 Angular 变化检测，这与我最初的想法相反。

this.zone.runOutsideAngular(() => {
    window.document.addEventListener("keydown", (event: KeyboardEvent) => { 
        switch (event.which || event.keyCode) {
            case 16:
            case 17: {
                event.stopPropagation();
                break;
            }
        }
    });
});

感谢@ashfaq.p和 @Nour有关 NgZone.runOutsideAngular 的建议。