Angular / HammerJS - избегайте вращательных жестов при пинч-входе / выходе

Question

Я пытаюсь запустить жесты пинч без жестов запуска.Моя цель - запустить оба жеста по отдельности.

Я построил конфигурацию молотка в своем модуле, как показано ниже:

import * as Hammer from 'hammerjs';
import { HammerGestureConfig } from '@angular/platform-browser';

export class HammerConfig extends HammerGestureConfig{

    buildHammer(element: HTMLElement)
    {
        const hammerManager = new Hammer(element);
        let rotate = new Hammer.Rotate({enable: true});
        let pinch = new Hammer.Pinch({enable: true});
        let pan = new Hammer.Pan();

        pan.requireFailure([rotate, pinch]);
        pinch.recognizeWith(rotate);
        hammerManager.add([rotate, pan, pinch]);

        return hammerManager;
    }
}

Я пытаюсь:

pinch.dropRecognizeWith(rotate);

и

rotate.dropRecognizeWith(pinch);

Это изменение не работает.Запускаются только жесты поворота ...

Если добавить:

pinch.recognizeWith(rotate);

Запускает оба события ...

Есть ли способ запустить их отдельно?Я буду признателен за любую помощь

Answer 1

Я смотрю на свои проекты, в которых я использую HammerJS в приложениях Angular 5, 6 и 7, и я использую другой способ настройки HammerJS.

Ваша идея отключить поворот / сжатие / панорамирование в определенной ситуации верна и в соответствии с документацией все в порядке.

Hire - мой пример конфигурации без requireFailure и recognizeWith:

export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any>{
        'swipe': {direction: Hammer.DIRECTION_ALL}, // override default settings
        'pan': {direction: Hammer.DIRECTION_ALL}
    };
}

@NgModule({
    imports: [
        AppModule
    ],
    providers: [{
        provide: HAMMER_GESTURE_CONFIG,
        useClass: MyHammerConfig
    }],
    bootstrap: [AppComponent]
})
export class AppBrowserModule {
}

Таким образом, ваша конфигурация должна выглядеть следующим образом:

export class MyHammerConfig extends HammerGestureConfig {
    overrides = <any>{
        'rotate': {
            direction: Hammer.DIRECTION_ALL,
            enable: true
        }, // override default settings
        'pinch': {
            direction: Hammer.DIRECTION_ALL,
            enable: true,
            recognizeWidth: 'rotate'
        },
        'pan': {
            direction: Hammer.DIRECTION_ALL,
            requireFailure: ['rotate, pinch']
        }
    };
}

Если это не работает для вас, дайте мне знать. Я постараюсь решить твою проблему завтра, потому что у меня нет больше времени сегодня.

Смотрите также документацию Angular о переопределении в соответствии с документацией HammerJS найм .