应用程序无法在 Angular 9 中使用 Hammer.JS 和 HammerGestureConfig 识别滑动

Question

我无法使用 Hammer.JS 在我的 Angular 应用程序中识别滑动。 它的设置是这样的：

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

但是，使用运行 iOS 13 的 iPad 或 iPhone 都不会触发swipeleft或swiperight 。

我是否缺少任何关键配置？ 或者我有这个代码的另一个问题？

---

我还测试了这个Stackblitz “blog-ng-swiping” ，它在触摸设备上运行良好，但它使用的是 Angular 8。

Answer 1

事实证明，Angular 9 有一个新的HammerModule ，它用于与 Hammer.JS 相关的所有内容，也用于编译过程中的摇树。

因此，除了 Hammer.JS、手势等的整个配置之外，您还需要在您的应用程序中包含此模块，以使 Hammer.JS 与 Angular 9 一起工作：

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

@NgModule({
  imports: [
    HammerModule
  ]
)}