如何在angular2中配置hammerjs事件？
要将hammerjs事件与angular2一起使用，我只需在我的html中包含这样的事件：
<div (press)="onLongPress($event)"></div>
在这种情况下 (press) 的时间默认为 251 毫秒。 Hammerjs press event documentation
如何将这个时间配置为不同的值？
【问题讨论】：
标签： angular events hammer.js gestures
使用 Angular 2.0.1，实际上有一种直接配置hammerjs的方法：
// app.module.ts
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any>{
// override hammerjs default configuration
'pan': {threshold: 5},
'swipe': {
velocity: 0.4,
threshold: 20,
direction: 31 // /!\ ugly hack to allow swipe in all direction
}
}
}
@NgModule({
imports: [ ...],
declarations: [ ... ],
bootstrap: [ ... ],
providers: [ {
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig
} ]
})
请注意，我使用 hack 允许通过使用 Hammer.DIRECTION_ALL 的当前值向所有方向滑动。尽管该值可能暂时不会改变，但我会在有人私聊直接从应用模块访问 Hammer.DIRECTION_ALL 值的方法时更新这篇文章。
【讨论】：
import * as Hammer from 'hammerjs'; 然后你就可以'swipe': { direction: Hammer.DIRECTION_ALL } ;)
这并不容易，因为它是由 CustomHammerGesturesPlugin 类在内部处理的。我看到了两种方法：
提供您自己的 Hammer 插件并注册。当Hammer 对象被实例化时，您需要提供您的配置作为第二个参数：
@Injectable()
export class CustomHammerGesturesPlugin extends HammerGesturesPlugin {
addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
var zone = this.manager.getZone();
eventName = eventName.toLowerCase();
return zone.runOutsideAngular(function() {
// Creating the manager bind events, must be done outside of angular
var mc = new Hammer(element); // <-------
mc.get('pinch').set({enable: true});
mc.get('rotate').set({enable: true});
var handler = function(eventObj) { zone.run(function() { handler(eventObj); }); };
mc.on(eventName, handler);
return () => { mc.off(eventName, handler); };
});
}
}
由于HammerGesturesPlugin 提供程序在使用bootstrap 函数时会自动注册，因此您需要使用此代码来引导您的应用程序（请参阅https://github.com/angular/angular/blob/master/modules/angular2/platform/browser.ts#L110 和https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser_common.ts#L79）：
platform(BROWSER_PROVIDERS).application(appProviders).bootstrap(appComponentType);
解决方法可能是拦截Hammer 对象的实例化（请参阅Can I intercept a function called directly?）：
<script>
window.TargetHammer = window.Hammer;
window.Hammer = function() {
var mc = new TargetHammer(arguments[0]);
mc.get('press').set({
time: 1000
});
return mc;
}
</script>
看到这个 plunkr：https://plnkr.co/edit/eBBC9d?p=preview。
否则我不知道你使用的是哪个版本的Angular2但是Hammer事件有问题（beta.0似乎还可以）：
【讨论】：
为了配置 Hammer.js 事件，您可以使用 recognizer（事件选项）。这可以在指令中使用，如下所示：
import {Directive, ElementRef, Input, OnInit, OnDestroy} from '@angular/core';
import {Gesture} from 'ionic-angular/gestures/gesture';
declare var Hammer: any
@Directive({
selector: '[spLongPress]'
})
export class LongPressDirective implements OnInit, OnDestroy {
el: HTMLElement;
pressGesture: Gesture;
constructor(el: ElementRef) {
this.el = el.nativeElement;
}
ngOnInit() {
this.pressGesture = new Gesture(this.el, {
recognizers: [
[Hammer.Press, { time: 500 }]
]
});
this.pressGesture.listen();
this.pressGesture.on('press', e => {
console.log('pressed!!');
})
}
ngOnDestroy() {
this.pressGesture.destroy();
}
}
这会在 500 毫秒后触发事件。
【讨论】：
在对 Angular 的拉取请求之一之后，现在可以覆盖hammerjs 的配置。
我已经在其他帖子中回答了如何以 angular2 / typescript 方式覆盖hammerjs的默认配置变量。
通过这种方法，您可以覆盖所有默认设置，无需实例化自定义 HammerJs 插件。
这里是回答的链接：
【讨论】：