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的当前值向所有方向滑动。虽然该值可能暂时没有变化，但只要有人通过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）：< / p>

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似乎没问题）：

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

Answer 3

为了配置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();
  }
}

这会在500ms后触发事件。

Answer 4

在对angular进行一次拉取请求之后，现在有办法覆盖hammerjs的配置。

我在其他帖子中回答了如何以angular2 / typescript方式覆盖hammerjs的默认配置变量。

通过这种方法，您可以覆盖所有默认设置，而无需实例化自定义HammerJs插件。

这是回答的链接：

Using mobile events in Angular2

使用angular2配置Hammerjs事件

4 个答案: