在Angular中为不同模块配置hammer.js手势

我的根模块中有一个标准的自定义配置：

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

export class CustomHammerConfig extends HammerGestureConfig {
    overrides = {
        pan: {
            direction: 6 // this code enables only horizontal direction
        },
        pinch: {
            enable: false
        },
        rotate: {
            enable: false
        }
    };
}

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        //
    ],
    providers: [
        //
        {
            provide: HAMMER_GESTURE_CONFIG,
            useClass: CustomHammerConfig
        }
    ],
    bootstrap: [
        AppComponent
    ]
})

我有一个旋转木马组件，它必须只能水平平移，因此旋转木马组件块上的垂直平移不会阻止移动设备中的整个页面滚动

所以，global Hammer手势配置对我的旋转木马组件很有效

但我有另一个组件-画廊组件-必须在各个方向启用平移手势。我尝试在我的多媒体资料模块中配置锤子：

import { CommonModule} from '@angular/common';
import { NgModule } from '@angular/core';

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

import { GalleryComponent } from './gallery.component';

class GalleryHammerConfig extends HammerGestureConfig {
    overrides = {
        pan: {
            direction: 31 // this code enables all directions
        }
    };
}

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        GalleryComponent
    ],
    providers: [
        {
            provide: HAMMER_GESTURE_CONFIG,
            useClass: GalleryHammerConfig
        }
    ],
    exports: [
        GalleryComponent
    ]
})

export class GalleryModule {}

但它不会产生任何效果-Angular只理解根模块配置的锤子手势

如果我从根应用程序模块中删除Hammer手势配置并将其应用于旋转木马模块，那么旋转木马有自己的自定义配置，而Gallery也有自己的自定义配置-好吧，它根本没有任何效果-Angular使用自己的默认Hammer手势配置并使用它而不是我的自定义配置

---

那么，如何为不同的组件应用不同的锤子手势配置？

这是不可能使用相同的手势指令来实现的。 但是你可以

---

您可以使用@angular/platform浏览器内置的手势，而不是试图覆盖它们

您的转盘组件可以使用

panleft

和

panright

方法，而您的gallery应用程序可以使用

pan

方法。即使它们同时使用，也不会发生碰撞

我把平移手势组合在一起，但只要将

hammerjs

导入到应用程序中，就可以将其添加到任何元素上，比如

---

请问您是否能找到解决方案？我目前也有同样的问题。@NagarjunaYendluri唯一的解决方案是导入Hammer和HammerManager，创建自己的配置和手势处理程序，并将其链接到所需的某个DOM元素。想象一下，就像你使用了一些jQuery插件一样——这里也一样。关于Angular深入的文章中有更多的信息。

export interface Recognizer {
  new(options?: any): Recognizer;
  recognizeWith(otherRecognizer: Recognizer | string): Recognizer;
}

export interface RecognizerStatic {
  new(options?: any): Recognizer;
}

export class GestureConfig extends HammerGestureConfig {
  private _hammer = typeof window !== 'undefined' ? (window as any).Hammer : null;

  buildHammer(element: HTMLElement): any {
    const mc = new this._hammer(element, this._hammerOptions || undefined);
    const pan = new this._hammer.Pan();
    const panYourWay = this._createRecognizer(pan, {event: 'panYourWay', direction: 31});
    // Add customized gestures to Hammer manager
    mc.add([panYourWay]);
    return mc; 
  }

 /** Creates a new recognizer, without affecting the default recognizers of HammerJS */
  private _createRecognizer(base: Recognizer, options: any, ...inheritances: Recognizer[]) {
    let recognizer = new (base.constructor as RecognizerStatic)(options);

    inheritances.push(base);
    inheritances.forEach(item => recognizer.recognizeWith(item));

    return recognizer;
  }
}