我无法使用 Hammer.JS 在我的 Angular 应用程序中识别滑动。 它的设置是这样的:

"@angular/core": "~9.0.0-next.6",
"hammerjs": "^2.0.8",
"zone.js": "~0.10.2"

app.module.ts看起来像这样:

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as hammer from 'hammerjs';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    swipe: { direction: hammer.DIRECTION_HORIZONTAL },
    pinch: { enable: false },
    rotate: { enable: false }
  };
}

@NgModule({
  imports: [
    BrowserModule,
  ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],
})

app.component.ts有这个方法:

onSwipe() {
  console.log('swipe');
}

最后app.component.html看起来像这样:

<div (swipeleft)="onSwipe()" (swiperight)="onSwipe()">
  <h1>Swipe here</h1>
</div>

但是,使用运行 iOS 13 的 iPad 或 iPhone 都不会触发swipeleftswiperight

我是否缺少任何关键配置? 或者我有这个代码的另一个问题?


我还测试了这个Stackblitz “blog-ng-swiping” ,它在触摸设备上运行良好,但它使用的是 Angular 8。

#1楼 票数:11 已采纳

事实证明,Angular 9 有一个新的HammerModule ,它用于与 Hammer.JS 相关的所有内容,也用于编译过程中的摇树。

因此,除了 Hammer.JS、手势等的整个配置之外,您还需要在您的应用程序中包含此模块,以使 Hammer.JS 与 Angular 9 一起工作:

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

@NgModule({
  imports: [
    HammerModule
  ]
)}

  ask by lampshade translate from so

未解决问题?本站智能推荐:

1回复

如何在 Angular 9 中使用 Hammer.js 保持垂直滚动和缩放并检测水平和对角线平移/滑动?

我想要的是 ... 是在 Angular 9 中使用 Hammer.js 检测平移(或滑动)。 它应该像这样工作: 应检测水平平移 应检测到一定程度的对角平移1 不应阻止垂直滚动 不应阻止捏缩放,因为这会导致可访问性问题 在图像中, green显示了浏览器默认的所有内容,不应
1回复

如何阻止Hammer.js不传播滑动事件?

我有一个可用的标记和脚本,可以使用Hammer.js跟踪容器上的水平滑动: const container = document.getElementsByClassName('swiper')[0]; const manager = new Hammer.Manager(con
3回复

Angular 9 从不调用 HammerGestureConfig.buildHammer

更新到 Angular 9 后,无法再使用 Hammer.js。 我们扩展了 Angular HammerGestureConfig ,如下所示: import {HammerGestureConfig} from '@angular/platform-browser'; import {Injec
1回复

将分页控件添加到整页触摸滑动器/滑块-Hammer.js

点击寻找 以下是我使用Hammer.js创建的全功能的全页面触摸滑块 您可以drag , swipe或pan来浏览页面。 滑块可以按预期工作,但是我现在尝试通过添加两个按钮来创建后备导航,以便单击时也可以进行向左和向右分页。 题 单击时如何调用锤子向左或向右滑
1回复

Hammer.js-需要默认缩放行为+滑动

我要使其滑动,以便根据滑动的方向将用户带到上一个或下一个图像。 该部分效果很好,但它删除了放大图像的功能。 根据此答案 ,解决方案是启用touchAction: 'auto' ,但这会完全破坏Hammer.js,从而使其完全无法滑动。 码: 我可以使用touchAction:
3回复

在 Angular 11 中使用 Hammer.JS 的应用程序无法识别手势,例如平移

在使用 Hammer.JS 的 Angular 应用程序中,我无法识别任何手势,例如滑动、平移。 它是这样设置的: 包.json: app.module.ts: main.ts: app.component.ts: app.component.html: 我测试了“鼠标
1回复

Angular 9 pinchin pinchout 文本中的 HammerJS 不可选择

大家好,我注意到在组件中使用 (pinchin) 或 (pinchout) 事件时,其中的文本不再可选。 我看到这个问题很久以前已经在hammerjs github页面https://github.com/hammerjs/hammer.js/issues/81中得到纠正。 所以基本上他们说的是使用
1回复

蚂蚁设计(NG-Zorro)轮播滑动问题

我遇到了蚂蚁设计(NG-Zorro)轮播滑动的问题。 用鼠标滑动不起作用。 我该如何解决? https://ng.ant.design/components/carousel/en