2016-07-22 13 views
0

Als Angular2 implementiert mit hammerjs hören, so kann es in die Pfanne geben, eine Prise Ereignisse mit HostListener hören:Wie man angular2 pinchmove und Pan-Ereignis gleichzeitig

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

Allerdings möchte ich die Pinch-und Pfanne implementieren Funktionalität, während HostListener nicht auf das folgende Ereignis hören:

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

aus der Dokumentation von Hammerjs, ist es mit recognizeWith diese beiden Ereignisse gleichzeitig zu hören:

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

Aber kann ich HostListener verwenden, um auf diese beiden Ereignisse zu hören, anstatt das recognizeWith zu verwenden? main.ts:

Antwort

1

Auf diese Weise ich hinzugefügt meine eigene Konfiguration haben werden

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

Für weitere Referenz, ist dies der Beitrag habe ich gemacht in eckig/eckig: Listen to pinchmove and pan event simultaneously with hammerjs?

+0

Wie Sie dies verwenden, versuchen Sie es in der HTML als (Pinch Pan) verwenden wird nicht funktionieren –

Verwandte Themen