如何防止或取消对全局keydown事件的更改检测

Question

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

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

Answer 1

使用Change detection的角度工作中的

zone.js。

zone.js提供了一种名为runOutsideAngularZone()。

的方法

this.zone.runOutsideAngular(() => {
  window.document.addEventListener('mousemove', this.mouseMove.bind(this));
});

这将允许您在角度变化检测之外使用keydown或keyup / mouse move等事件。

有关详细信息，请访问：zones in angular

Answer 2

我实际上已经实现了一个全局捕获keydown事件监听器来阻止keydown事件的传播，但我在识别密钥时犯了一个错误。正确完成后，处理的globalZoneAwareCallback部分被删除（在问题中的图像右侧）; globalZoneAwareCaptureCallback部分仍然存在。

解决方案是停止在全局事件监听器中传播keydown事件，而这个事件监听器本身不会触发变化检测：

• 在keydown事件（例如，在服务中）
上设置全局事件侦听器
• 停止 Shift 和 Ctrl 键事件的传播
• 将来电window.document.addEventListener传递给NgZone.runOutsideAngular。这很重要，因为addEventListener会触发角度变化检测，这与我最初的想法相反。

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的建议。