如何让angular2同时监听pinchmove和平移事件

Question

由于Angular2是用hammerjs实现的，所以它可以用HostListener来监听pan, pinch事件：

@HostListener('pinchmove', ['$event'])
onPinchMove(e: any) {
 console.dir(e);
}

但是我想实现捏合和平移功能，而 HostListener 无法监听以下事件：

@HostListener('pinchmove pan', ['$event'])
onPinchMove(e: any) {
 console.dir(e);
}

从 Hammerjs 的文档来看，它使用 recognizeWith 同时监听这两个事件：

var pinch = new Hammer.Pinch();
var pan= new Hammer.Pan();
pinch.recognizeWith(pan);

但是我可以使用 HostListener 来监听这两个事件而不是使用 recognizeWith 吗？

Answer 1

为此，我必须添加自己的配置： main.ts:

bootstrap(MyApp, [
   provide(HAMMER_GESTURE_CONFIG, {useClass: MyHammerConfig})
])

MyHammerConfig.ts

class MyHammerConfig extends HammerGestureConfig  {
   events: string[] = ['pinch pan']; //necessary for ng2 to recognize "pinch pan" event
   buildHammer(element: HTMLElement): HammerInstance {
      let mc = new Hammer(element, {domEvents: true});
      mc.get('pinch').set({enable: true});
      mc.get('pinch').recognizeWith(mc.get('pan'));
      return mc;
   }
}

更多参考，这是我在angular/angular中制作的post： Listen to pinchmove and pan event simultaneously with hammerjs?

如何让angular2同时监听pinchmove和平移事件

How to make angular2 listen to pinchmove and pan event simultaneously

angular

hammer.js