angular - 使用 angular2 配置 Hammerjs 事件

Question

如何在 angular2 中配置 hammerjs 事件？

要在 angular2 中使用 hammerjs 事件，我只需要像这样在我的 html 中包含事件:

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

在这种情况下，默认情况下(按下)的时间为 251 毫秒。 Hammerjs press event documentation

如何配置这个时间具有不同的值？

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 的当前值向所有方向滑动。尽管该值可能暂时不会改变，但只要有人私下告诉我可以直接从应用模块访问 Hammer.DIRECTION_ALL 值的方法，我就会更新这篇文章。