垂直滚动不适用于 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 {
}

取自这里