使用angular2配置Hammerjs事件

Question

如何在angular2中配置hammerjs事件？

要使用angular2的hammerjs事件,我只需要在我的html中包含事件,如下所示:

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

在这种情况下(按)默认时间为251毫秒. Hammerjs新闻事件文件

如何配置此时间以获得不同的值？

Answer 1

使用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的当前值向所有方向滑动.虽然该值可能暂时不会改变,但只要有人通过app模块直接访问Hammer.DIRECTION_ALL值,我就会立即更新此帖子.

Answer 2

这并不容易，因为它是由 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（请参阅我可以拦截直接调用的函数吗？）：

  <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似乎还可以）：

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