Отключите события Hammer JS в Angular 2, чтобы разрешить прокрутку

Question

Я использую Hammer JS для событий swipeleft и swiperight, но пользователь все еще должен иметь возможность прокручивать вверх и вниз. Мне удалось захватить события swipeup и swipeown, но я действительно хочу отключить их (и panup и pandown). Как бы я сделал это внутри Angular 2?

В Manager есть метод off, который отменяет привязку к событию, я просто не знаю, как вызвать это из Angular 2.

Менеджер офф метод док

Или есть другой способ переопределить Hammer JS, чтобы разрешить нормальную прокрутку?

Answer 1

Эти ссылки указали мне в правильном направлении:

• https://scotch.io/tutorials/using-hammerjs-touch-gesture-in-angular-2
• 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 }
    ]
})

Answer 2

В моем приложении 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 }

Answer 3

Вы можете создать один файл.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';

Это работает для меня!