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

Posted 2023-02-22

【中文标题】Angular 2 RC 2 使用移动手势（滑动、捏合、旋转）

【英文标题】：Angular 2 RC 2 Using Mobile Gestures (Swipe, Pinch, Rotate)

【发布时间】：2016-10-24 15:41:39

【问题描述】：

谁能指导如何在 Angular 2 RC2 中使用移动手势。

可能是这样的：

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

从API可以看出

HAMMER_GESTURE_CONFIG 
HammerGestureConfig

下

@angular/platform-browser

但不知道怎么用。

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

【参考方案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;
    

【讨论】：

angular2 中默认禁用了像捏这样的一些事件。你是如何配置hammerjs来解决这个问题的？

Noremac，很抱歉回复晚了。这可能会帮助scotch.io/tutorials/using-hammerjs-touch-gesture-in-angular-2