使用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

Answer 3

為了配置Hammer.js事件，您可以使用識別器 （事件的選項）。 這可以在指令中使用，如下所示：

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之一的pull請求之后，現在有辦法覆蓋hammerjs的配置。

我已經在其他線程中回答了如何以angular2 / typescript方式覆蓋hammerjs的默認配置變量。

通過此方法，您可以覆蓋所有默認設置，並且無需實例化自定義HammerJs插件。

這是回答的鏈接：

在Angular2中使用移動事件