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

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 组件 block 上的垂直平移不会阻止整个页面在移动设备上滚动。

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

但我有另一个组件——图库组件——必须在所有方向启用平移手势。我尝试在我的图库模块中配置 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 手势。

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

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

Answer 1

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

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

Here's a stackblitz我把平移手势放在一起，但你可以将它添加到任何元素上，只要你正在导入 hammerjs进入您的应用程序。

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