应用程序无法识别手势,例如平移,使用 Hammer.JS in Angular 11
App won't recognize gestures, like pan, using Hammer.JS in Angular 11
我使用 Hammer.JS 在我的 Angular 应用程序中无法识别任何手势,例如滑动、平移。设置如下:
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 中的任何手势都不起作用。
我的配置有问题吗?谁能帮我找出问题所在?非常感谢。
你试过了吗https://www.npmjs.com/package/@egjs/hammerjs hammerJS 似乎不再活跃了
我已经设法在 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
}]
我知道没有
这应该可以工作
您应该 在 BrowserModule 之后导入 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 { }
我使用 Hammer.JS 在我的 Angular 应用程序中无法识别任何手势,例如滑动、平移。设置如下:
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 中的任何手势都不起作用。
我的配置有问题吗?谁能帮我找出问题所在?非常感谢。
你试过了吗https://www.npmjs.com/package/@egjs/hammerjs hammerJS 似乎不再活跃了
我已经设法在 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
}]
我知道没有
这应该可以工作您应该 在 BrowserModule 之后导入 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 { }