带有Angular 9的HammerJs手势

Question

我有一个带有 ionic/ anuglar 6 和hammerJs 的项目，但我决定更新到 anuglar9.1.6 和 ionic 5.0.0。

问题是我的手势不再起作用了！我的 press 和 pressup 无法识别。

但是我已经导入了 HammerModule..

请任何人都可以帮助我：/ .. 我确定有事可做

谢谢！

请在 home.ts 和 home.html 下方找到。

app.module:

imports: [HammerModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: IonicGestureConfig
  },
  ],

离子手势.ts

@Injectable()
export class IonicGestureConfig extends HammerGestureConfig {
    buildHammer(element: HTMLElement) {
        const mc = new (<any>window).Hammer(element);

        for (const eventName in this.overrides) {
            if (eventName) {
              mc.get(eventName).set(this.overrides[eventName]);
            }
          }

        return mc;
    }
}

import {Component} from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    public progress: number = 0;
    public pressState: string = "released";

    // Interval function
    protected interval: any;


    onPress($event) {
        console.log("onPress", $event);
        this.pressState = 'pressing';
        this.startInterval();
    }

    onPressUp($event) {
        console.log("onPressUp", $event);
        this.pressState = 'released';
        this.stopInterval();
    }

    startInterval() {
        const self = this;
        this.interval = setInterval(function () {
            self.progress = self.progress + 1;
        }, 50);
    }

    stopInterval() {
        clearInterval(this.interval);
    }


}

<ion-header>
  <ion-toolbar>
      <ion-title>
          Long Press Demo
      </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h2> Button Progress: {{ progress }}</h2>
  <h2> Presses State: {{ pressState }}</h2>
  <ion-button (press)="onPress($event)" (pressup)="onPressUp($event)">Press Me</ion-button>
</ion-content>

Answer 1

我认为这可能与自 v6.x 以来hammerjs 脚本本身不再与 Angular 捆绑的事实有关。

请看这里：https://angular.io/api/platform-browser/HammerModule

请注意，应用程序仍然需要包含 HammerJS 脚本 本身。该模块只是简单地设置之间的协调层 HammerJS 和 Angular 的 EventManager。

尝试在 main.ts 中导入hammerjs，看看这是否有助于解决问题？

npm install hammerjs --save

然后在 polyfill.ts 或 main.ts 中：

import "hammerjs";