HammerJs Gesture with Angular 9

Question

我有一个带有ionic/anuglar 6和hammerJs的项目，这些项目很震撼，但我决定更新到anuglar9.1.6和ionic5.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";