Question

我使用Hammer JS进行swipeleft和swiperight事件，但用户仍然需要能够向上和向下滚动。我能够捕获swipeup和swipeown事件，但我真正想做的是禁用它们（以及panup和pandown）。我如何在Angular 2中做到这一点？

在管理器下有一个取消绑定事件的方法，我只是不知道如何在Angular 2中调用它。

Manager off method doc

还是有另一种方法来覆盖Hammer JS以允许正常滚动吗？

Answer 1

这些链接指向了我正确的方向：

在我的module.ts中，我添加了以下内容：

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

declare var Hammer: any;

export class MyHammerConfig extends HammerGestureConfig {
    buildHammer(element: HTMLElement) {
        let mc = new Hammer(element, {
            touchAction: "pan-y",
        });
        return mc;
    }
}

@NgModule({
    providers: [
        { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
    ]
})

Answer 2

在我的情况下，您可以创建一个.ts文件，该文件为 hammer.config.ts 在该文件中输入以下代码，

import { HammerGestureConfig } from '@angular/platform-browser';

declare var Hammer: any;

export class AppHammerConfig extends HammerGestureConfig {
    buildHammer(element: HTMLElement) {
        let mc = new Hammer(element, {
            touchAction: "auto",
        });
        return mc;
    }
}

之后，在您的 app.module.ts 文件中，将以下对象放置在提供程序中，

{ provide: HAMMER_GESTURE_CONFIG, useClass: AppHammerConfig }

看起来像

 providers: [
    //other_providers,
    { provide: HAMMER_GESTURE_CONFIG, useClass: AppHammerConfig }
  ]

别忘了将HAMMER_GESTURE_CONFIG导入app.module.ts中，

import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

此外，您还需要从其位置导入创建的类AppHammerConfig，

import { AppHammerConfig } from '--path--/hammer.config';

这对我有用。

Answer 3

在我的angular 8应用中，我正在使用以下解决方案：

npm install hammerjs --save
npm install  @types/hammerjs --save

并在我的角度课程文件中：

    import {HammerGestureConfig } from '@angular/platform-browser';


    export class MyHammerGestureConfig extends HammerGestureConfig {

       // tslint:disable-next-line:typedef
       buildHammer(element: HTMLElement) {
           return new Hammer(element, {
               touchAction: 'pan-y'
       });
    }

    }

并且如上所述（来自JEM）

之后，在您的app.module.ts文件中，将以下对象放入提供程序中，

  { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }

关闭Angular 2中的Hammer JS事件以允许滚动

3 个答案: