Angular 2 RC 2 с помощью мобильных жестов (Swipe, Pinch, Rotate)

Question

Может кто-нибудь подсказать, пожалуйста, как использовать мобильные жесты в Angular 2 RC2.

Может быть что-то вроде:

<div (swipeLeft)="OnSwipeLeft()"></div>

Из API видно

HAMMER_GESTURE_CONFIG 
HammerGestureConfig

под

@angular/platform-browser

Но не уверен, как его использовать.

В некоторых постах я вижу, что некоторые пользователи предлагают включить Hammer.js. Но я считаю, что если он уже в API, мы сможем включить и использовать его простым способом.

Answer 1

Хорошо, я нашел решение, и оно работает с Angular 2 RC 2:

Добавьте hammerjs в файл packages.json

"hammerjs": "2.0.8",

Включить hammerjs

<script src="/node_modules/hammerjs/hammer.min.js"></script>

Тогда в шаблоне:

<div (swipeleft)="onSwipeleft($event)" (swiperight)="onSwiperight($event)">

или может быть что-то вроде этого в шаблоне:

<div (swipe)="onSwipe($event)">Swipe (direction = {{swipeDirection}})</div>
<div (pinch)="onPinch($event)">pinch (scale = {{pinchScale}})</div>
<div (rotate)="onRotate($event)">Rotate (angle = {{rotateAngle}})</div>

и в вашем компоненте:

class GesturesCmp {

    swipeDirection: string = '-';
    pinchScale: number = 1;
    rotateAngle: number = 0;

    onSwipe(event: any): void {
        this.swipeDirection = event.deltaX > 0 ? 'right' : 'left';
    }

    onPinch(event: any): void {
        this.pinchScale = event.scale;
    }

    onRotate(event: any): void {
        this.rotateAngle = event.rotation;
    }
}