I have a simple code to make the Web Site swipeable, It's working when I test on Google Chrome on Desktop, but when I'm going to test on my mobile device or on Google Chrome DevTools Device Mode it's not working.
I tried to change the values of HammerGestureConfig overrides, but when I try to change to swipeleft or swiperight I got an error, only accept the swipe override.
...
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>
I had to change the inputClass to 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
}]
]
});
}
}
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.