Использование мобильных событий в Angular2

ну, долго после операции, но если у вас есть только простые требования и не хотите гадить с молотком.Джей-Эс, вот базовый горизонтальный свайпер. Просто зайдите в компонент и добавьте свой собственный doSwipeLeft и doSwipeRight функции.

  touch1 = {x:0,y:0,time:0};

  @HostListener('touchstart', ['$event'])
  @HostListener('touchend', ['$event'])
  //@HostListener('touchmove', ['$event'])
  @HostListener('touchcancel', ['$event'])
  handleTouch(ev){
    var touch = ev.touches[0] || ev.changedTouches[0];
    if (ev.type === 'touchstart'){
      this.touch1.x = touch.pageX;
      this.touch1.y = touch.pageY;
      this.touch1.time = ev.timeStamp;
    } else if (ev.type === 'touchend'){
      var dx = touch.pageX - this.touch1.x;
      var dy = touch.pageY - this.touch1.y;
      var dt = ev.timeStamp - this.touch1.time;

      if (dt < 500){
        // swipe lasted less than 500 ms
        if (Math.abs(dx) > 60){
          // delta x is at least 60 pixels
          if (dx > 0){
            this.doSwipeLeft(ev);
          } else {
            this.doSwipeRight(ev);
          }
        }
      }
    } 
  }

Я немного колебался, чтобы добавить жесты салфетки в мое приложение, потому что ответы здесь, казалось, предполагали, что это будет немного грязно.

исключение: молоток.js не загружен, не может связать событие swipeleft

эта ошибка легко справляется с помощью просто загрузки молотка.js. Нет необходимости в пользовательском коде.

другая ошибка, упомянутая в комментариях, кажется, была ошибкой, которая исправлена с rc1.

я смог заставить что-то работать, обойдя встроенную интеграцию Hammer и запустив свой собственный:

import { Component, ElementRef, AfterViewInit } from 'angular2/core';

@Component({
  selector: 'redeem',
  templateUrl: './redeem/components/redeem.html'
})
export class RedeemCmp implements AfterViewInit {

    static hammerInitialized = false;

    constructor(private el:ElementRef) { }

    ngAfterViewInit() {
        console.log('in ngAfterViewInit');
        if (!RedeemCmp.hammerInitialized) {
            console.log('hammer not initialised');

            var myElement = document.getElementById('redeemwrap');
            var hammertime = new Hammer(myElement);
            hammertime.on('swiperight', function(ev) {
                console.log('caught swipe right');
                console.log(ev);
            });

            RedeemCmp.hammerInitialized = true;
        } else {            
            console.log('hammer already initialised');
        }
    }
}

"исключение: молоток.js не загружается, не может связать событие swipeleft " возникает, потому что hammerjs должен быть включен в страницу.

пример:

Я прочитал все другие ответы о том, как использовать hammerjs с угловым, и они выглядят хакерскими. По умолчанию HammerJs отключил методы SwipeDown и SwipeUp. Все предыдущие ответы не верны angular2 typescript способ решения проблемы жестов или переопределения по умолчанию настройки молотка. Мне потребовалось около 4 часов копания в angular2 и hammerjs.

вы тут:

Первое, что нам понадобится, это hammerjs typings для angular2.

typings install github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#de8e80dfe5360fef44d00c41257d5ef37add000a --global --save

Далее нам нужно создать пользовательское переопределение конфигурации класса. Этот класс можно использовать для переопределения всех параметров конфигурации hammerjs и angular2 hammerjs по умолчанию.

молоток.конфиг.ТС:

import { HammerGestureConfig } from '@angular/platform-browser';
import {HammerInstance} from "@angular/platform-browser/src/dom/events/hammer_gestures";


export class HammerConfig extends HammerGestureConfig  {

    buildHammer(element: HTMLElement): HammerInstance {
        var mc = new Hammer(element);

        mc.get('pinch').set({ enable: true });
        mc.get('rotate').set({ enable: true });

        mc.add( new Hammer.Swipe({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );

        for (let eventName in this.overrides) {
            mc.get(eventName).set(this.overrides[eventName]);
        }

        return mc;
    }
}

последнее, что нам нужно сделать, это открыть наши главные boostrap-файл и вставьте нашу пользовательскую конфигурацию в метод boostrap следующим образом:

// ... other imports ...
import { HammerConfig } from './shared/hammer.config';

bootstrap(AppComponent, [
    provide(HAMMER_GESTURE_CONFIG, { useClass: HammerConfig })
]);

теперь в нашем приложении мы можем использовать swipeDown и swipeUp

<div class="some-block" (swipeDown)="onSwipeDown"></div>

этот запрос pull включен переопределение настроек по умолчанию и дал мне отправную точку, чтобы найти правильный путь:

https://github.com/angular/angular/pull/7924

вам нужно добавить

HelperService и HammerGesturesPluginCommon провайдерам где-то, либо в @Component(...) аннотации или bootstrap(AppComponent, [...]), чтобы избавиться от ошибки "нет провайдера ..."

вы добавили тег скрипта для Hammer.js где-то на странице входа?