Захват события смахивания на весь экран с молотком и Angular 8

Question

Я пытаюсь захватить жесты смахивания на весь экран моего приложения. Идея состоит в том, чтобы эти диспетчерские действия могли прослушивать другие службы, в данном случае это маршрутизатор для целей навигации.

Поскольку я хочу, чтобы эти прослушиватели были только в одном месте, я попытался прикрепить их к телу или к разделителю. покрывая экран моего приложения. Оба метода работают не так, как я хочу.

<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>

Answer 1

Если вы хотите добавить Hammer в приложение Angular 8, вам нужно в качестве провайдера HAMMER_GESTURE_CONFIG и использовать класс HammerGestureConfig

  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerGestureConfig
    }
  ]

Что ж, если вы хотите использовать другой класс, переопределите некоторую собственность ie Например, вы хотите провести пальцем по всем направлениям. Вы создаете класс, расширяющий HammerGestureConfig, и используете этот класс в провайдере

export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any>{
      swipe: { direction: Hammer.DIRECTION_ALL  }
    };
}

 // And use as provider

  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerGestureConfig
    }
  ]

. В своем приложении вы можете использовать fromEvent rx js

const hammerConfig = new HammerGestureConfig()
//or if you use another class as provider:
//    const hammerConfig=new MyHammerConfig()

const hammer=hammerConfig.buildHammer(document.documentElement)
fromEvent(hammer, "swipe").pipe(
  takeWhile(()=>this.alive))
  .subscribe((res: any) => {
    console.log(res.deltaX);
});

см. Пример в stackblitz

(*) Я положил трубку takeWhile, чтобы отметить необходимую отписку