Приложение не распознает свайпы, используя Hammer. JS и HammerGestureConfig в Angular 9.

Question

Я не могу распознать пролистывания в своем приложении Angular, используя Hammer. JS. Это выглядит так:

"@angular/core": "~9.0.0-next.6",
"hammerjs": "^2.0.8",
"zone.js": "~0.10.2"

app.module.ts выглядит так:

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as hammer from 'hammerjs';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    swipe: { direction: hammer.DIRECTION_HORIZONTAL },
    pinch: { enable: false },
    rotate: { enable: false }
  };
}

@NgModule({
  imports: [
    BrowserModule,
  ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],
})

app.component.ts имеет такой метод:

onSwipe() {
  console.log('swipe');
}

И наконец app.component. html выглядит так:

<div (swipeleft)="onSwipe()" (swiperight)="onSwipe()">
  <h1>Swipe here</h1>
</div>

Однако, ни swipeleft, ни swiperight запускаются когда-либо с помощью iPad или iPhone оба работают iOS 13.

Я пропустил какую-либо важную конфигурацию? Или у меня есть другая проблема с этим кодом?

---

Я также протестировал этот Stackblitz "blog-ng-swiping" , который отлично работает на сенсорных устройствах, но он использует Angular 8.

Answer 1

Оказывается, что Angular 9 имеет новый HammerModule, который используется для всего, что связано с Hammer. JS, а также для встряхивания деревьев во время компиляции.

Так что кроме вся конфигурация Хаммера. JS, жесты и др. c. вам нужно включить этот модуль в ваше приложение, чтобы Hammer работал с Angular 9:

import { HammerModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    HammerModule
  ]
)}