我正在使用Hammer JS处理swipeleft和swiperight事件,但用户仍然需要能够上下滚动。 我能够捕获swipeup和swipedown事件,但我真正想做的是禁用它们(以及panup和pandown)。在Angular 2中如何实现? 在Manager下有一个方法off可以解绑事件,我不知道如何从Angular 2中调用它。
Manager off method doc
或者是否有另一种方式覆盖Hammer JS以允许正常滚动?
这些链接指导了我朝着正确的方向发展:
在我的module.ts文件中,我添加了以下内容:
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
declare var Hammer: any;
export class MyHammerConfig extends HammerGestureConfig {
buildHammer(element: HTMLElement) {
let mc = new Hammer(element, {
touchAction: "pan-y",
});
return mc;
}
}
@NgModule({
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
]
})
import { HammerGestureConfig } from '@angular/platform-browser';
declare var Hammer: any;
export class AppHammerConfig extends HammerGestureConfig {
buildHammer(element: HTMLElement) {
let mc = new Hammer(element, {
touchAction: "auto",
});
return mc;
}
}
接下来,在你的app.module.ts文件中,将以下对象放入providers中:
{ provide: HAMMER_GESTURE_CONFIG, useClass: AppHammerConfig }
providers: [
//other_providers,
{ provide: HAMMER_GESTURE_CONFIG, useClass: AppHammerConfig }
]
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
同时,您需要从其位置导入已创建的类AppHammerConfig,例如:
import { AppHammerConfig } from '--path--/hammer.config';
这对我有效!
npm install hammerjs --save
npm install @types/hammerjs --save
在我的Angular类文件中:
import {HammerGestureConfig } from '@angular/platform-browser';
export class MyHammerGestureConfig extends HammerGestureConfig {
// tslint:disable-next-line:typedef
buildHammer(element: HTMLElement) {
return new Hammer(element, {
touchAction: 'pan-y'
});
}
}
并且如JEM所述
之后在你的app.module.ts文件中,将以下对象放入providers中,
{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }