如何在 Angular 17（独立组件）中使用 Hammer.js 启用垂直滑动

Question

我尝试使用 Hammer.js 和 Angular 17 实现垂直滑动，但它不起作用。

我正在尝试做一个类似tinder的应用程序，所以我希望能够向右滑动、向左滑动和向上滑动。我发现hammer.js 模块可以轻松完成此操作，并且水平滑动可以正常工作，但是无法识别垂直滑动。

这是我的

app.config.ts

：

@Injectable()
export class HammerConfig {
overrides: any = {
swipe: { direction: DIRECTION_ALL },
}};

export const appConfig: ApplicationConfig = {
    providers: [
        provideRouter(routes),
        provideAnimations(),
        { provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig },
        importProvidersFrom(HammerModule),
    ]
};

这是我的 swipe.component.html :

<div class="test"
    (swipedown)='startAnimation("swipedown")'
    (swipeup)='startAnimation("swipeup")'
    (swipeleft)='startAnimation("swipeleft")' 
    (swiperight)='startAnimation("swiperight")'
    >
    <p>{{ swipeEvent }}</p>
    
</div>

最后是我的功能

startAnimation

：

startAnimation(state: string) {
    this.swipeEvent = state;
    console.log('startAnimation', state);
}

如果有人知道如何解决这个问题，我将非常感激！

谢谢！ :)

Answer 1

这是我的 Angular 17 独立应用程序的可行解决方案

1. 添加“导入‘hammerjs’;”到你的app.config.ts。这将导入
2. 导入 hamemr 模块 importProvidersFrom(HammerModule),
3. 您无需覆盖锤子手势配置即可进行基本使用。