web-dev-qa-db-ja.com

垂直スクロールがHammerJSおよびAngular2で機能しない

Angular2でHammerJSを使用すると問題が発生します。私はカルーセルを持っています（bootstrap Angular2イベントハンドラーを備えたカルーセルに基づく））左にスワイプおよび右にスワイプを聞いていますイベント。スワイプ自体は完全に機能します。問題は、HammerJSを使用しているため、カルーセルコンポーネントを上下にスクロールできないことと、ビューポートサイズのフルアイテムであるため、大きな問題です。

この問題はどのように解決できますか？

プラットホーム：
Angular2 2.1.2
Android 5.1.1を搭載したSamsung Galaxy S2
Google Chrome Androidの場合：54.0.2840.85

angularcarouselhammer.js
31
user1511408

とった！

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

pinchおよびrotateを無効にした後、垂直スクロールが機能するようになりました。これまでのところ、他の方法を見つけることができませんでした。 pinchおよびrotateイベントがどうなるかわかりません（つまり、無効にされることになると思います）。しかし、この設定がなくても、(pinch)="onPinch($event)"-とにかく何もしませんでした。

私のプロジェクトのAngularバージョン：2.4.1

テスト済み：

  • Chrome for Windows（Surface上にあるので、実際のタッチスクリーン-エミュレートだけではありません）v 55.0.2883.87 m（64ビット）
  • Chrome for Android-v 55.0.2883.91
41
MrCroft

このソリューションはmy Chrome 66（Angular 6 app）で機能します。スクロールが有効になっていて、右/左へのスワイプも機能します：

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