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

Question

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

\n\n

import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';\nimport { HammerGestureConfig } from '@angular/platform-browser';\n\nexport class CustomHammerConfig extends HammerGestureConfig {\n    overrides = {\n        pan: {\n            direction: 6 // this code enables only horizontal direction\n        },\n        pinch: {\n            enable: false\n        },\n        rotate: {\n            enable: false\n        }\n    };\n}\n\n@NgModule({\n    declarations: [\n        AppComponent\n    ],\n    imports: [\n        //\n    ],\n    providers: [\n        //\n        {\n            provide: HAMMER_GESTURE_CONFIG,\n            useClass: CustomHammerConfig\n        }\n    ],\n    bootstrap: [\n        AppComponent\n    ]\n})\n

\n\n

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

\n\n

因此，全局 Hammer 手势配置适用于我的 Carousel 组件。

\n\n

但我有另一个组件 \xe2\x80\x94 一个图库组件 \xe2\x80\x94 ，必须在所有方向上启用平移手势。我尝试在我的 Gallery 模块中配置 Hammer：

\n\n

import { CommonModule} from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';\nimport { HammerGestureConfig } from '@angular/platform-browser';\n\nimport { GalleryComponent } from './gallery.component';\n\nclass GalleryHammerConfig extends HammerGestureConfig {\n    overrides = {\n        pan: {\n            direction: 31 // this code enables all directions\n        }\n    };\n}\n\n@NgModule({\n    imports: [\n        CommonModule\n    ],\n    declarations: [\n        GalleryComponent\n    ],\n    providers: [\n        {\n            provide: HAMMER_GESTURE_CONFIG,\n            useClass: GalleryHammerConfig\n        }\n    ],\n    exports: [\n        GalleryComponent\n    ]\n})\n\nexport class GalleryModule {}\n

\n\n

但它不会产生任何效果 \xe2\x80\x94 Angular 仅理解根模块配置的 Hammer 手势。

\n\n

如果我从根应用程序模块中删除 Hammer 手势配置并将其应用到 Carousel 模块，那么 Carousel 有自己的自定义配置，Gallery 也有自己的自定义配置 \xe2\x80\x94 ，它不会产生任何效果\xe2\x80\x94 Angular 采用自己的默认 Hammer 手势配置，并使用它而不是我的自定义配置。

\n\n

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

\n

Answer 1

使用相同的手势指令来做到这一点是不可能的。但您可以创建一个新的手势指令。

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;
  }
}