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的文档中，它使用recognWith同时收听这两个事件：

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

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

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

有关更多参考，这是我在角度/角度上发布的帖子： Listen to pinchmove and pan event simultaneously with hammerjs?

如何使angular2同时听pinchmove和pan事件

1 个答案: