在使用移动Angular2事件 [英] Using mobile events in Angular2

问题描述

我在想，如果我能在问候得到一些帮助，以用于移动设备的事件。我环顾四周的绑定功能，在刷卡角2.事件我在这个此问题的方法在Github是提到角2使用Hammer.js移动事件处理。

我有一些麻烦的情况下工作，因为我得到以下错误：

  

例外：未加载Hammer.js，swipeleft事件不能结合

我的code的片断如下：

 进口{组件，查看，AfterContentInit}从'angular2 /核心;
进口{} HelperService从./helper-service
进口{} HammerGesturesPluginCommon从'angular2 / src目录/平台/ DOM /事件/ hammer_common@视图（{
  模板：`＆LT; D​​IV [ID] =middleCircle（swipeleft）=doThis（）＆GT;＆LT; / DIV＆GT;`
}）出口类ColumnDirective实现AfterContentInit {
  构造函数（私人helperService：HelperService）{}
  做这个（）{
     的console.log（'这事已经做了。'）;
   }
 }
 

如果我在锤手势添加到我的构造函数，我得到这个错误：

 构造函数（私人helperService：HelperService，私人hammerGesturesPluginCommon：HammerGesturesPluginCommon）{}
 

  

例外：无商对于T！ （ColumnDirective - > T）

这个问题的任何帮助将是AP preciated！

解决方案

我能够得到的东西绕过工作内置集成锤并运行我自己的：

 进口{组件，ElementRef，AfterViewInit}从'angular2 /核心;@零件（{
  选择：'赎回'，
  templateUrl：./redeem/components/redeem.html
}）
出口类RedeemCmp实现AfterViewInit {    静态hammerInitialized = FALSE;    构造函数（私人EL：ElementRef）{}    ngAfterViewInit（）{
        的console.log（'在ngAfterViewInit'）;
        如果（！RedeemCmp.hammerInitialized）{
            的console.log（'锤不初始化'）;            变种myElement =的document.getElementById（'redeemwrap'）;
            VAR hammertime =新锤（myElement）;
            hammertime.on（'swiperight'，函数（EV）{
                的console.log（'抓向右滑动，即可'）;
                的console.log（EV）;
            }）;            RedeemCmp.hammerInitialized = TRUE;
        }其他{
            的console.log（'锤已经初始化'）;
        }
    }
}
 

I was wondering if I could get some help in regards to events for mobile devices. I was looking around for a way to bind functions to swipe events in Angular 2. I saw in this this issue on Github that mentions that Angular 2 uses Hammer.js for mobile event handling.

I'm having some trouble getting the event to work because I get the following error:

EXCEPTION: Hammer.js is not loaded, can not bind swipeleft event

A snippet of my code is below:

import {Component, View, AfterContentInit} from 'angular2/core';
import {HelperService} from "./helper-service";
import {HammerGesturesPluginCommon} from 'angular2/src/platform/dom/events/hammer_common'

@View({
  template: `<div [id]="middleCircle" (swipeleft)="doThis()"></div>`
})

export class ColumnDirective implements AfterContentInit {
  constructor(private helperService:HelperService) {}
  doThis(){
     console.log('This thing has been done.');
   }
 }

If I add in Hammer Gestures to my constructor, I get this error:

constructor(private helperService:HelperService, private hammerGesturesPluginCommon: HammerGesturesPluginCommon) {}

EXCEPTION: No provider for t! (ColumnDirective -> t)

Any help with this issue would be appreciated!

解决方案

I was able to get something working by bypassing the built-in Hammer integration and running my own:

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

这篇关于在使用移动Angular2事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！