垂直滚动不适用于 HammerJS 和 Angular2

Question

我在将 HammerJS 与 Angular2 结合使用时遇到问题。我有一个旋转木马（基于带有 Angular2 事件处理程序的 bootstrap 旋转木马），我正在听 向左滑动 和 向右滑动 事件。滑动本身完美无缺。问题是，由于我使用 HammerJS，我无法在轮播组件上滚动 up/down，并且由于它是一个完整视口大小的项目，所以这是一个大问题。

如何解决这个问题？

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

测试时间：

Chrome for Windows（在 Surface 上，如此真实的触摸屏 - 不仅仅是模拟）v 55.0.2883.87 m（64 位）
Chrome 对于 Android - v 55.0.2883.91

Answer 2

此解决方案适用于我的 Chrome 66（Angular 6 应用程序）。滚动已启用，滑动 right/left 也有效：

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

maint.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 中测试时，滚动仍然不起作用，我不知道是版本原因还是什么，但它不起作用。当我在实际的移动设备中进行测试时 phone 滚动可以正常工作！

Answer 4

经过 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

Answer 5

ionic with angular 9 别忘了加上在 app.module.ts


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

垂直滚动不适用于 HammerJS 和 Angular2

Vertical scroll is not working with HammerJS and Angular2

carousel

hammer.js

angular