垂直滚动不适用于HammerJS和Angular2 [英] Vertical scroll is not working with HammerJS and Angular2

问题描述

我在将HammerJS与Angular2结合使用时遇到问题. 我有一个轮播(基于带有Angular2事件处理程序的引导轮播)，在这里我正在听向左滑动和向右滑动事件. 滑动本身效果完美. 问题在于，由于我使用HammerJS，因此无法在旋转木马组件上向上/向下滚动，并且由于它是全视口大小的项目，因此这是一个很大的问题.

I'm having a problem using the HammerJS with Angular2. I have a carousel (based on the bootstrap carousel with Angular2 event handlers) where I'm listening to the swipe left and swipe right events. The swipe itself works perfectly. The problem is that since I use the HammerJS I can not scroll up/down over my carousel component and since it's a full viewport sized item it's a huge issue.

该问题如何解决?

平台:
Angular2 2.1.2
具有Android的Samsung Galaxy S2 5.1.1
适用于Android的Google Chrome:54.0.2840.85

Platform:
Angular2 2.1.2
Samsung Galaxy S2 with Android 5.1.1
Google Chrome for Android: 54.0.2840.85

推荐答案

知道了！

在您的AppModule中:

In your 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)"-仍然无济于事.

Now vertical scrolling works, after disabling pinch and rotate. Couldn't find any other way so far. I'm not sure what happens to the pinch and rotate events (I mean they would be disabled, I think). But even without this config, attaching a (pinch)="onPinch($event)" - didn't do anything anyway.

我的项目中的角版本:2.4.1

Angular version in my project: 2.4.1

测试日期:

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

这篇关于垂直滚动不适用于HammerJS和Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！