Question

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

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
    ]
})

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

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

但我有另一个组件 - 一个Gallery组件 - 必须在所有方向上启用平移手势。我尝试在我的Gallery模块中配置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只能理解root模块配置的Hammer手势。

如果我从根App模块中删除Hammer手势配置并将其应用到Carousel模块，那么Carousel有自己的自定义配置，并且Gallery也有自己的自定义配置 - 好吧，它根本没有任何效果 - Angular采用自己的默认Hammer手势配置并使用它而不是我的自定义配置。

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

Answer 1

您可以使用内置的@ angular / platform-browser手势，而不是尝试覆盖它们。

您的轮播组件可以使用panleft和panright方法，而图库应用程序可以使用pan方法。即使同时使用它们，您也不会发生碰撞。

Here's a stackblitz我将平移手势放在一起，但是只要将hammerjs导入到应用程序中，就可以将其添加到任何元素上。

<div (pan)="onpan($event)"></div>

Answer 2

使用相同的手势指令是不可能的。但你可以create a new gesture directive。

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

为Angular

2 个答案: