I have a project with ionic/ anuglar 6 and hammerJs which rocks but I have decided to update to anuglar9.1.6 and ionic 5.0.0.
The problem is that my gesture doesn't work anymore. my press and pressup are not recognized.
However I have imported HammerModule..
Please anyone can help me:/.. I sure there is something to do
Thank you!
Please find below home.ts and home.html.
app.module:
imports: [HammerModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{
provide: HAMMER_GESTURE_CONFIG,
useClass: IonicGestureConfig
},
],
ionic-gesture.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>
I think it might be related to the fact that hammerjs script itself is no longer bundled with Angular since v6.x.
See here: https://angular.io/api/platform-browser/HammerModule
Note that applications still need to include the HammerJS script itself. This module simply sets up the coordination layer between HammerJS and Angular's EventManager.
Try to import hammerjs inside your main.ts and see if this helps to resolve the issue?
npm install hammerjs --save
then inside polyfill.ts or main.ts:
import "hammerjs";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.