HammerJS在移动设备或Google Chrome设备模式下无法使用滑动功能

Question

我有一个简单的代码可以使网站可以左右滑动，在桌面版的Google Chrome中测试时它可以工作正常，但是当我尝试在移动设备或Google Chrome开发者工具的设备模式下进行测试时，它就不起作用了。

我尝试更改HammerGestureConfig覆盖的值，但是当我尝试将其更改为swipeleft或swiperight时，我收到了错误提示，只接受swipe覆盖。

...
import * as Hammer from 'hammerjs';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG, BrowserModule } from '@angular/platform-browser';
import { SwipeComponent } from './components/swipe/swipe.component';

export class HammerConfig extends HammerGestureConfig {
  overrides = {
    swipe: { direction: Hammer.DIRECTION_ALL },
  } as any;
}

@NgModule({
  declarations: [
    ...
    SwipeComponent,
  ],
  ...
  providers: [
    AuthService,
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    }
  ],
})
export class AppModule { }

<div
  (swipeleft)="navigateForwardTo(forward)"
  (swiperight)="navigateBackTo(back)">
  <ng-content></ng-content>
  <app-navigation-arrows 
    [back]="back"
    [backEnabled]="backEnabled"
    [forwardEnabled]="forwardEnabled"
    [forward]="forward">
  </app-navigation-arrows>
</div>

- Luiz Fernando Maehana

Answer 1

我需要将inputClass更改为Hammer.TouchInput

export class HammerConfig extends HammerGestureConfig  {
  buildHammer(element: HTMLElement): HammerManager {
     return new Hammer.Manager(element, {
      touchAction: 'auto',
      inputClass: Hammer.TouchInput,
      recognizers: [
        [Hammer.Swipe, {
          direction: Hammer.DIRECTION_HORIZONTAL
        }]
      ]
    });
  }
}

- Luiz Fernando Maehana