Question

我在使用带有Angular2的HammerJS时遇到问题。我有一个旋转木马（基于带有Angular2事件处理程序的bootstrap轮播），我正在听向左滑动和向右滑动事件。滑动本身完美无缺。问题是，因为我使用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

maint.ts

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

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

Answer 4

具有9号角的离子别忘了添加在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 {
}

取自here

垂直滚动不适用于HammerJS和Angular2

5 个答案: