angular - examples - import hammerjs

El desplazamiento vertical no funciona con HammerJS y Angular2

Question

Tengo un problema al utilizar el HammerJS con Angular2. Tengo un carrusel (basado en el carrete de inicio con controladores de eventos Angular2) donde escucho el movimiento a la izquierda y los eventos a la derecha . El golpe en sí funciona perfectamente. El problema es que, dado que uso el HammerJS, no puedo desplazarme hacia arriba / abajo sobre el componente de mi carrusel y, dado que es un elemento del tamaño de una ventana completa, es un gran problema.

¿Cómo se puede resolver este problema?

Plataforma:
Angular2 2.1.2
Samsung Galaxy S2 con Android 5.1.1
Google Chrome para Android: 54.0.2840.85

Answer 1

¡Lo tengo!

En tu AppModule:

import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from ''@angular/platform-browser'';
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any> {
''pinch'': { enable: false },
''rotate'': { enable: false }
}
}
@NgModule({
declarations: [
// ...
],
imports: [
// ...
],
providers: [
// ...
{
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig
}
],
bootstrap: [ AppComponent ]
})
export class AppModule {}

Ahora funciona el desplazamiento vertical, después de deshabilitar pinch y rotate . No se ha podido encontrar otra manera hasta ahora. No estoy seguro de qué sucede con los eventos de pinch y rotate (me refiero a que estarían deshabilitados, creo). Pero incluso sin esta configuración, adjuntando un (pinch)="onPinch($event)" - no hizo nada de todos modos.

Versión angular en mi proyecto: 2.4.1.

Probado en:

• Chrome para Windows (en una superficie, una pantalla táctil real, no solo emulada) v 55.0.2883.87 m (64 bits)
• Chrome para Android - v 55.0.2883.91

Answer 2

Esta solución funciona para mi Chrome 66 (aplicación Angular 6). El desplazamiento está habilitado, el desplazamiento hacia la derecha / izquierda también funciona:

import {
HammerGestureConfig,
HAMMER_GESTURE_CONFIG
} from ''@angular/platform-browser'';
import * as Hammer from ''hammerjs'';
export class MyHammerConfig extends HammerGestureConfig {
buildHammer(element: HTMLElement) {
const mc = new Hammer(element, {
touchAction: ''pan-y''
});
return mc;
}
}
@NgModule({
declarations: [
// ...
],
imports: [
// ...
],
providers: [
// ...
{
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig
}
],
bootstrap: [ AppComponent ]
})
export class AppModule {}