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 {}