配置与angular2 Hammerjs事件 [英] Configure Hammerjs events with angular2

问题描述

如何配置hammerjs事件angular2？

How can I configure hammerjs events in angular2?

要使用hammerjs与angular2事件我只是包括我的html像这样的活动：

To use hammerjs events with angular2 I just have to include events on my html like this:

<div (press)="onLongPress($event)"></div>

在此情况下（ preSS ）将有251毫秒的时间，默认情况下。
Hammerjs preSS事件文档

In this case (press) will have time of 251 milliseconds, by default. Hammerjs press event documentation

我怎么配置这个时候有不同的价值？

How do I configure this time to have different value?

推荐答案

这不是因为它的内部由CustomHammerGesturesPlugin类处理容易。我看到两种方法：

It's not something easy since it's internally handled by the CustomHammerGesturesPlugin class. I see two approaches:

• 提供自己的锤插件并注册。当锤对象实例化，您需要提供您的配置，第二个参数：

• Provide your own Hammer plugin and register it. When the Hammer object is instantiated, you need to provide your configuration as second parameter:

@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 提供商自动注册，则需要使用此code到引导你的应用程序（见的https://github.com/angular/angular/blob/master/modules/angular2/platform/browser.ts#L110和<一个href=\"https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser_common.ts#L79\" rel=\"nofollow\">https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser_common.ts#L79):

Since the HammerGesturesPlugin provider is automatically register when using the bootstrap function, you need to use this code to bootstrap your application (see https://github.com/angular/angular/blob/master/modules/angular2/platform/browser.ts#L110 and https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser_common.ts#L79):

platform(BROWSER_PROVIDERS).application(appProviders).bootstrap(appComponentType);

一个解决办法可能是为拦截锤对象的实例化（见的我可以拦截直接调用函数）：

<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的版本，但有一个与锤事件问题（beta.0似乎是好）：

Otherwise I don't know which version of Angular2 you use but there is a problem with Hammer events (beta.0 seems to be okay):

• https://github.com/angular/angular/issues/6993

• https://github.com/angular/angular/issues/6993

这篇关于配置与angular2 Hammerjs事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！