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

Question

我正在使用Hammer JS处理swipeleft和swiperight事件，但用户仍然需要能够上下滚动。 我能够捕获swipeup和swipedown事件，但我真正想做的是禁用它们（以及panup和pandown）。在Angular 2中如何实现？ 在Manager下有一个方法off可以解绑事件，我不知道如何从Angular 2中调用它。 Manager off method doc 或者是否有另一种方式覆盖Hammer JS以允许正常滚动？

- JEM

Answer 1

这些链接指导了我朝着正确的方向发展:

• https://scotch.io/tutorials/using-hammerjs-touch-gesture-in-angular-2#customize-hammerjs
• https://github.com/hammerjs/hammer.js/issues/1014
• http://hammerjs.github.io/touch-action/

在我的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 }
    ]
})

- JEM

---

@DoryZidon，就我个人而言，这对我的Angular 7 CLI应用程序解决得非常完美。我只需将上述代码添加到我的AppModule中即可。希望能有所帮助！ - Dr.Legendaddy

你在真实的Safari iPhone上试过了吗？ - Charaf

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文件中，将以下对象放入providers中：

{ provide: HAMMER_GESTURE_CONFIG, useClass: AppHammerConfig }

它将看起来像这样：

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

不要忘记在 app.module.ts 中导入 HAMMER_GESTURE_CONFIG，例如：

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

同时，您需要从其位置导入已创建的类AppHammerConfig，例如：

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

这对我有效！

- Rahul Dudhane

Answer 3

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

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

在我的Angular类文件中：

    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文件中，将以下对象放入providers中，

  { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }

- Nicole Sulzberger