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

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>

然而，swipeleft 或 swiperight 都不会被触发 iPad 或 iPhone 都运行 iOS 13.

我是否遗漏了任何关键配置？或者我对这段代码还有其他问题吗？

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

Answer 1

事实证明 Angular 9 有一个新的 HammerModule 用于所有 Hammer.JS 相关的东西，也用于编译期间的 tree shaking。

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

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

@NgModule({
  imports: [
    HammerModule
  ]
)}

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

App won't recognize swipes using Hammer.JS and HammerGestureConfig in Angular 9

javascript

swipe

hammer.js

angular

angular9