使用Hammer and Angular 8在整个屏幕上捕获滑动事件

Question

我正在尝试在应用程序的整个屏幕上捕获滑动手势。这个想法是让其他服务可以监听这些调度动作，在这种情况下，是一个用于导航的路由器。

因为我只希望将这些听众放在一个地方，所以我尝试将它们连接到主体或覆盖应用程序屏幕的div。这两种方法都不如我所愿。

<div (swipeleft)="swipeLeft()" (swiperight)="swipeRight()" class="touch"></div>

swipeLeft() 
  this.store.dispatch(UserActions.swipeLeft());

回想起来，触摸层的问题应该很明显：它覆盖了屏幕，因此覆盖了应用程序的其余部分。将pointer-events: none;设置为到达应用程序的其余部分将中断滑动检测。

const mc = new Hammer(document.querySelector('body'));

mc.on('swipeleft swiperight', (ev) => 
  console.log(ev.type);
  // this.store.dispatch(UserActions.swipeLeft());
);

在此处附加问题的地方是，它似乎只在某些元素上记录滑动，例如app-root和我拥有的状态栏，但不在我的路由器插座上，或者在底部的工具栏上有一些按钮。] >

所以，如何捕获整个应用程序上的滑动？

_{我已经尝试创建一个代码段来重现该问题，但是如果没有Angular组件，它的行为几乎就像我希望我的应用程序那样。尝试从摘要中的按钮边缘滑动时，可以观察到与我的问题类似的行为。}

const touchLayer = document.getElementById('touch');
const body = document.querySelector('body');

const mc = new Hammer(body);

mc.on("swipeleft swiperight", function(ev) 
  touchLayer.textContent = ev.type + " gesture detected.";
);#touch,
#myApp 
  position: fixed;
  height: 300px;
  width: 100%;


#myApp 
  background: repeating-linear-gradient(-55deg, #666, #666 10px, #333 10px, #333 20px);
  opacity: .5;


#touch 
  background: cyan;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
  opacity: .5;


.card 
  width: 200px;
  height: 100px;
  background: red;
  position: relative;
  margin: 1em;


button 
  margin: 2em;
  right: 0;
  bottom: 0;
  position: absolute;
<script src="https://hammerjs.github.io/dist/hammer.js"></script>

<!-- Tried putting this on top, blocking the screen -->
<div id="touch"></div>

<div id="myApp">
  <div class="card">
    <button onclick="alert('test')">Button!</button>
  </div>
  <div class="card">
    <button onclick="alert('test')">Button!</button>
  </div>
</div>

我正在尝试在应用程序的整个屏幕上捕获滑动手势。想法是让其他服务可以侦听这些调度动作，在这种情况下，是出于导航目的的路由器。...