web-dev-qa-db-fra.com

Le défilement vertical ne fonctionne pas avec HammerJS et Angular2

J'ai un problème avec HammerJS avec Angular2. J'ai un carrousel (basé sur le carrousel bootstrap avec les gestionnaires d'événements Angular2)) où j'écoute glisser vers la gauche et glisser vers la droite Le balayage lui-même fonctionne parfaitement. Le problème est que puisque j'utilise le HammerJS, je ne peux pas faire défiler vers le haut/bas sur mon composant de carrousel et puisqu'il s'agit d'un élément de la taille d'une fenêtre complète, c'est un énorme problème.

Comment résoudre ce problème?

Plate-forme:
Angulaire2 2.1.2
Samsung Galaxy S2 avec Android 5.1.1
Google Chrome pour Android: 54.0.2840.85

angularcarouselhammer.js
31
user1511408

Je l'ai!

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

Le défilement vertical fonctionne maintenant, après avoir désactivé pinch et rotate. Je n'ai pas trouvé d'autre moyen pour l'instant. Je ne sais pas ce qui arrive aux événements pinch et rotate (je veux dire qu'ils seraient désactivés, je pense). Mais même sans cette configuration, attacher un (pinch)="onPinch($event)" - n'a rien fait de toute façon.

Version angulaire dans mon projet: 2.4.1

Testé sur:

  • Chrome pour Windows (sur une surface, donc un véritable écran tactile - pas seulement émulé) v 55.0.2883.87 m (64 bits)
  • Chrome pour Android - v 55.0.2883.91
41
MrCroft

Cette solution fonctionne pour mon Chrome 66 (application Angular 6). Le défilement est activé, le balayage vers la droite/gauche fonctionne également:

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 {}
6
Sebastian Denis