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

Naveed Ahmed 发表于 Dev

纳韦德·艾哈迈德（Naveed Ahmed）

任何人都可以指导如何在Angular 2 RC2中使用移动手势。

可能是这样的：

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

从API可以看到

HAMMER_GESTURE_CONFIG 
HammerGestureConfig

在下面

@angular/platform-browser

但不确定如何使用它。

在一些帖子中，我看到一些用户建议包含Hammer.js。但是我相信，如果它已经包含在api中，我们应该能够以一种简单的方式包含和使用它。

纳韦德·艾哈迈德（Naveed Ahmed）

好的，我找到了解决方案，它可以与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;
    }
}