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

Question

在我的 Angular 应用程序中使用 Hammer.JS，我无法识别任何手势，例如 swipe、pan 等。它的设置如下：

package.json：

"@angular/core": "11.0.5",
"@angular/platform-browser": "~11.0.5",
"@angular/platform-browser-dynamic": "~11.0.5",
"hammerjs": "^2.0.8",
"zone.js": "~0.10.3"

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule, HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';


@NgModule({
  imports:      [ HammerModule, BrowserModule, BrowserAnimationsModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

main.ts:

import 'hammerjs';

app.component.ts:

onPan(evt) {
    console.log("onPAN");
}

app.component.html:

<div class="gesture__zone" (pan)="onPan($event)">
  <h1>Pan Gesture</h1>
</div>

我测试了'mousedown'，它运行良好。但是在hammerJs中的任何手势都无法工作。

我的配置有什么问题吗？可以请任何人帮我找出问题吗？非常感谢。

- Tao

Answer 1

你应该像这样在 BrowserModule 之后导入 HammerModule：imports HammerModule

import { NgModule } from '@angular/core';
import { BrowserModule, HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform- 
browser/animations';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';


@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, HammerModule, 
   FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

- lin liu

Answer 2

我成功地将这个功能应用于 Angular 11，只是通过手动安装hammerjs:

npm install hammerjs --save

app.module.ts

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

export class HammerConfig extends HammerGestureConfig {
  overrides = {
    swipe: { direction: Hammer.DIRECTION_ALL },
  };
}

@NgModule({
  declarations: [....],
  imports: [...],
  providers: [{
    ...
    provide: HAMMER_GESTURE_CONFIG,
    useClass: HammerConfig
  }]

我知道这应该可以在没有任何问题的情况下运行

- Csaba

Answer 3

你试过https://www.npmjs.com/package/@egjs/hammerjs吗？看起来HammerJS已经不再更新了。

- carsten

---

它在我的这边无法工作。我使用了"npm install --save @egjs/hammerjs"来安装这个包，并移除了所有的hammerjs。然后在app.module.ts文件中，我添加了以下内容：import HammerModule from "@egjs/hammerjs"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ], providers: [ HammerModule ] }) - Tao