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

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

Angular 2 RC 2 Using Mobile Gestures (Swipe, Pinch, Rotate)

angular

hammer.js

angular2-template

angular2-directives

angular2-services