angular - 垂直滚动不适用于 HammerJS 和 Angular2

Question

我在将 HammerJS 与 Angular2 结合使用时遇到问题。我有一个旋转木马(基于带有 Angular2 事件处理程序的引导旋转木马)，我在其中收听向左滑动 和向右滑动 事件。滑动本身完美无缺。问题是，由于我使用 HammerJS，我无法在轮播组件上向上/向下滚动，而且由于它是一个全视口(viewport)大小的项目，所以这是一个大问题。

如何解决这个问题？

Platform:
Angular2 2.1.2
Samsung Galaxy S2 with Android 5.1.1
Google Chrome for 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

测试于:

• Windows 版 Chrome(在 Surface 上，如此真实的触摸屏 - 不仅仅是模拟)v 55.0.2883.87 m(64 位)
• Android 版 Chrome - v 55.0.2883.91