垂直滾動不適用於 HammerJS 和 Angular2

Question

我在使用帶有 Angular2 的 HammerJS 時遇到問題。 我有一個輪播（基於帶有 Angular2 事件處理程序的引導輪播），我在那里監聽向左滑動和向右滑動事件。 滑動本身完美無缺。 問題是，由於我使用 HammerJS，我無法在我的輪播組件上向上/向下滾動，而且由於它是一個完整的視口大小的項目，這是一個大問題。

如何解決這個問題？

平台：
Angular2 2.1.2
三星 Galaxy S2 與 Android 5.1.1
安卓版谷歌瀏覽器：54.0.2840.85

Answer 1

知道了！

在您的 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

測試：

• 適用於 Windows 的 Chrome（在 Surface 上，如此真實的觸摸屏 - 不僅僅是模擬）v 55.0.2883.87 m（64 位）
• 適用於 Android 的 Chrome - v 55.0.2883.91

Answer 2

此解決方案適用於我的 Chrome 66（Angular 6 應用程序）。 啟用滾動，向右/向左滑動也有效：

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

Answer 3

就像在中提到的其他一些答案一樣

npm install hammerjs --save

維護文件

import 'hammerjs';

應用模塊

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } 
from '@angular/platform-browser';
...
export class HammerConfig extends HammerGestureConfig {
  overrides = <any> {
      'pinch': { enable: false },
      'rotate': { enable: false }
  }
}
...
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    }],
...

我嘗試了 100 萬種配置變化，當我在 chrome 中測試時滾動仍然不起作用，我不知道它的版本還是什么，但它不起作用。 當我在實際的手機中測試滾動是否有效！

Answer 4

帶有 angular 9 的 ionic不要忘記在 app.module.ts 中添加

import { HammerModule } from '@angular/platform-browser';
imports: [
    ...,
    HammerModule,
  ],

Answer 5

經過 2 天的研究和挫折，我找到了唯一適合我的解決方案：

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class CustomHammerConfig extends HammerGestureConfig  {
    overrides = <any>{
        'pinch': { enable: false },
        'rotate': { enable: false }
    }
}


@NgModule({
// ... declarations, imports,
providers: [
        // ...
        {
            provide: HAMMER_GESTURE_CONFIG,
            useClass: CustomHammerConfig
        }
    ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

取自這里