(swipeLeft) 不适用于hammerjs - 怎么了？答案

【问题标题】：(swipeLeft) doesn't work with hammerjs - what's wrong?(swipeLeft) 不适用于hammerjs - 怎么了？
【发布时间】：2020-03-31 00:16:28
【问题描述】：

我希望我的移动应用程序（使用 Ionic）在被滑动时导航到下一页，但设备既不能识别我的触摸，也不能识别 localhost 上的网页。

由于终端没有显示任何错误，我有点困惑。

我该如何解决这个问题？

app.module.ts：

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

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

tab1.page.ts：

import { NavController } from '@ionic/angular';
import { Tab2Page } from '../tab2/tab2.page';
import { Tab3Page } from '../tab3/tab3.page';

swipeLeftEvent(e) {
   if (e.direction == 2) {
       //direction 2 = left page
       this.navCtrl.navigateForward('tab3.page.html')
   }
}

swipeRightEvent(e) {
   if (e.direction == 4) {
       //direction 4 = right page.
       this.navCtrl.navigateForward('tab2.page.html')
   }
}

tab1.page.html：

<ion-content (swipeLeft)="swipeLeftEvent($event)" (swipeRight)="swipeRightEvent($event)">
  <div *ngIf="!type">
  </div>

  <ion-list *ngIf="type && !sub_type">
  </ion-list>

  <ion-list *ngIf="sub_type">
    </ion-list>
</ion-content>

其他页面的代码类似。

非常感谢！

【问题讨论】：

标签： angular ionic-framework swipe hammer.js

【解决方案1】：

试试这个：

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

@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
    buildHammer(element: HTMLElement): any {
      return new Hammer(element, {
        swipe: { direction: Hammer.DIRECTION_ALL }
      });
   }
}

imports: [
    HammerModule
],
providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig,
    },
]

【讨论】：