使用Angular2配置Hammerjs事件

Question

如何在Angular2中配置hammerjs事件？

要在Anguar2中使用hammerjs事件，只需在html中添加事件，示例如下：

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

在这种情况下，（press）默认的时间为251毫秒。 Hammerjs按压事件文档 我该如何配置不同值的时间？

- afvieira

---

你如何在HTML页面中引入hammerjs？ - Thierry Templier

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 
                } ]
})

请注意，我使用的是一种技巧来允许在所有方向上滑动，方法是使用 Hammer.DIRECTION_ALL 的当前值。尽管该值在一段时间内可能不会改变，但只要有人私下告诉我如何直接从 app 模块访问 Hammer.DIRECTION_ALL 值，我就会立即更新此帖子。

请注意，我使用的是一种技巧来允许在所有方向上滑动，方法是使用Hammer.DIRECTION_ALL的当前值。尽管该值在一段时间内可能不会改变，但只要有人私下告诉我如何直接从app模块访问Hammer.DIRECTION_ALL值，我就会立即更新此帖子。

- Bob

---

你只需要导入 import * as Hammer from 'hammerjs'; 然后你就可以使用 'swipe': { direction: Hammer.DIRECTION_ALL } 了 ;) - Luca De Nardi

Answer 2

这不是一件容易的事情，因为它是由CustomHammerGesturesPlugin类内部处理的。我看到有两种方法：

• Provide your own Hammer plugin and register it. When the Hammer object is instantiated, you need to provide your configuration as second parameter:

  @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); };
      });
    }
  }
  

  Since the HammerGesturesPlugin provider is automatically register when using the bootstrap function, you need to use this code to bootstrap your application (see https://github.com/angular/angular/blob/master/modules/angular2/platform/browser.ts#L110 and https://github.com/angular/angular/blob/master/modules/angular2/src/platform/browser_common.ts#L79):

  platform(BROWSER_PROVIDERS).application(appProviders).bootstrap(appComponentType);
  

• A workaround could be to intercept the instantiation of the Hammer object (see 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>
  

  See this plunkr: https://plnkr.co/edit/eBBC9d?p=preview.

否则我不知道您使用的是哪个版本的Angular2，但是Hammer事件存在问题（beta.0似乎没有问题）：

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

- Thierry Templier

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();
  }
}

这将在500毫秒后触发事件。

- Norbert Lanzanasto

Answer 4

在 Angular 的一个 pull request 后，现在有一种方法可以覆盖 hammerjs 的配置。

我在另一个线程中回答了如何以 Angular2 / TypeScript 的方式覆盖 hammerjs 的默认配置变量。

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

以下是答案链接：

在 Angular2 中使用移动事件

- user991