Angular 2 RC 2使用移动手势（滑动，捏合，旋转）

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