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

【问题标题】：Turn off Hammer JS events in Angular 2 to allow scrolling在 Angular 2 中关闭 Hammer JS 事件以允许滚动
【发布时间】：2017-02-23 19:55:36
【问题描述】：

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

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

Manager off method doc

或者是否有其他方法可以覆盖 Hammer JS 以允许正常滚动？

【问题讨论】：

标签： angular hammer.js

【解决方案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 }
    ]
})

【讨论】：

@DoryZidon fwiw 它完美地解决了我的 Angular 7 CLI 应用程序。我刚刚将上面的代码添加到我的 AppModule 中。希望有帮助！
你在物理 safari iphone 上试过了吗？

【解决方案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 }
  ]

别忘了在 app.module.ts 中导入 HAMMER_GESTURE_CONFIG 之类的，

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

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

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

这对我有用！

【讨论】：

【解决方案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 文件中将以下对象放入提供程序中，

  { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }

【讨论】：