垂直滚动不适用于 HammerJS 和 Angular2

Question

我在使用带有 Angular2 的 HammerJS 时遇到问题。 我有一个轮播（基于带有 Angular2 事件处理程序的引导轮播），我正在收听 向左滑动 和 向右滑动 事件。 滑动本身可以完美运行。 问题是，由于我使用 HammerJS，我无法在轮播组件上向上/向下滚动，而且因为它是一个完整的视口大小的项目，所以这是一个大问题。

如何解决这个问题？

平台：
Angular2 2.1.2
三星 Galaxy S2 与 Android 5.1.1
Android 版谷歌浏览器：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

测试日期：

• Chrome for Windows（在 Surface 上，所以真正的触摸屏 - 不仅仅是模拟）v 55.0.2883.87 m（64 位）
• Chrome for Android - 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

ma​​int.ts

import 'hammerjs';

app.module

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
    }],
...

我尝试了一百万种配置变化，当我在 chrome 中测试时滚动仍然不起作用，我不知道它是版本还是什么，但它不起作用。当我在实际的手机中进行测试时，滚动是有效的！

Answer 4

ionic 角度为 9 不要忘记添加 在 app.module.ts 中

从'@angular/platform-b​​rowser'导入{ 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 {
}

取自here