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文件

"锤子": "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;
    }
}