Angular 16中使用Hammer.js实现滑动手势失效问题求助

问题排查与修复步骤 #

1. 方法名与模板绑定不匹配 #

你的模板中绑定了(swipe)="onSwipe($event)"，但组件类里定义的方法是onSwipeRight，两者名称不一致，导致事件触发时找不到对应方法。

修复：
修改模板或组件方法名，保持一致：

• 模板修改：

<div class="slider-section" (swipe)="onSwipeRight($event)"></div>

• 或者组件方法重命名为onSwipe：

onSwipe(event) {
  console.log("event => ", event);
}

2. 确认Hammer.js依赖已安装 #

Angular 16及后续版本不再默认包含Hammer.js，需要手动安装依赖：

npm install hammerjs
npm install @types/hammerjs --save-dev

3. 确保Hammer.js在应用中导入 #

在main.ts顶部添加Hammer.js的导入语句，确保库被加载：

import 'hammerjs';

4. 验证HammerGestureConfig的导入路径 #

确认HammerGestureConfig是从正确的包导入：

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

5. 修正组件方法参数 #

你的组件方法定义了两个参数event和data，但模板中只传递了$event，会导致data参数为undefined，建议调整方法参数与传递的参数一致：

onSwipeRight(event) {
  console.log("event => ", event);
  // 如果需要额外数据，可以在模板中传递，比如 (swipe)="onSwipeRight($event, someData)"
}

6. 检查元素是否可交互 #

确保.slider-section元素有足够的尺寸（宽高），并且没有被其他元素遮挡，Hammer.js需要元素有可点击/触摸的区域才能触发手势。可以给元素添加基础样式测试：

.slider-section {
  width: 100%;
  height: 300px;
  background-color: #eee;
}

修复后的完整代码示例 #

main.ts #

import 'hammerjs';
import { Injectable } from '@angular/core';
import { HammerGestureConfig } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { AppComponent } from './app/app.component';
import { GestureSliderComponent } from './app/gesture-slider.component';
import { environment } from './environments/environment';

@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    swipe: { direction: Hammer.DIRECTION_ALL },
  };
}

if (environment.production) {
  enableProdMode();
}

const routes: Routes = [
  {
    path: "",
    component: GestureSliderComponent,
  },
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig },
  ],
}).catch((err: any) =>
  console.error("Application Boostrapping Error... ", err)
);

GestureSliderComponent html #

<div class="slider-section" (swipe)="onSwipeRight($event)"></div>

GestureSliderComponent ts #

import { Component } from '@angular/core';

@Component({
  selector: 'app-gesture-slider',
  templateUrl: './gesture-slider.component.html',
  styleUrls: ['./gesture-slider.component.css']
})
export class GestureSliderComponent {
  onSwipeRight(event) {
    console.log("event => ", event);
    // 可以通过event.direction判断滑动方向：Hammer.DIRECTION_LEFT/RIGHT/UP/DOWN
    console.log("swipe direction: ", event.direction);
  }
}

内容的提问来源于stack exchange，提问作者wissem chiha