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

问题描述

如何在angular2中配置hammerjs事件？

How can I configure hammerjs events in angular2?

要使用具有angular2的hammerjs事件，我只需要在我的HTML上包含事件，如下所示：

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

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

在这种情况下（按）将有251毫秒的时间，按默认。
Hammerjs新闻事件文件

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?

推荐答案

使用Angular 2.0.1，实际上是一种直接方式配置hammerjs：

With Angular 2.0.1, there's actually a direct way to configure 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值，我会更新此信息。

Note that I'm using a hack to allow swipe in all direction by using the current value of Hammer.DIRECTION_ALL. Though that value might not change for a while, I'll update this post as soon as someone whispers a way to access Hammer.DIRECTION_ALL value directly from the app module.

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