Utilisation d'événements mobiles dans Angular2
Je me demandais si je pouvais obtenir de l'aide en ce qui concerne les événements pour les appareils mobiles. Je cherchais un moyen de lier les fonctions de glisser événements Angulaire 2. J'ai vu dans cette ce problème sur Github qui mentionne que Angulaires 2 utilisations Hammer.js pour les mobiles, la gestion des événements.
Je vais avoir des difficultés à obtenir de l'événement pour le travail parce que j'obtiens l'erreur suivante:
EXCEPTION: Hammer.js n'est pas chargé, ne peut pas lier swipeleft événement
Un extrait de mon code est ci-dessous:
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.');
}
}
Si j'ajoute en Marteau Gestes de mon constructeur, je reçois cette erreur:
constructor(private helperService:HelperService, private hammerGesturesPluginCommon: HammerGesturesPluginCommon) {}
EXCEPTION: Pas de fournisseur pour t! (ColumnDirective -> t)
Toute aide avec ce problème serait appréciée!
source d'informationauteur Eric Gonzalo
Vous devez vous connecter pour publier un commentaire.
Après beaucoup de batailler, je n'avais pas obtenu de Angular2 de HammerGesturesPluginCommon de travail (jusqu'à présent). Inspiré par le projet de Loi Mayes réponse, je présente cela comme une élaboration de sa réponse, qui j'ai été en mesure d'obtenir de travail (testé sur un Ipad mini et un téléphone Android).
Fondamentalement, ma solution est la suivante.
D'abord, manuelle référence hammer.js dans les balises de script de votre index.html fichier (je l'ai aussi référence au marteau de temps pour éliminer le 300ms retard):
Ensuite, installez les Définitions de Type de hammerjs (dnt installer hammerjs -save). Ensuite, vous pouvez peut créer un Angular2 attribut directive comme ceci:
Vous devez définir Marteau.DIRECTION_ALL si vous voulez détecter vertical (haut/bas) glisse (gauche/droite de glisse sont par défaut, et non pas à la verticale). Plus d'options peut être trouvé sur le marteau de l'api ici: http://hammerjs.github.io/api/#hammer
Enfin, dans votre composant parent que vous pouvez faire quelque chose comme ceci:
De cette façon, vous avez seulement besoin de faire référence à l'attribut marteau-gestes lorsque vous souhaitez activer marteau gestes sur n'importe quel élément en particulier.
Remarque: l'élément semble avoir besoin d'un id unique pour le travail.Eh bien, bien longtemps après l'OP, mais si vous avez seulement à de simples exigences et ne veulent pas de coucher avec hammer.js, voici une base horizontale de chipeur. Il suffit de déposer dans un composant et ajouter votre propre
doSwipeLeft
etdoSwipeRight
fonctions.J'étais un peu hésitante à ajouter les gestes de balayage à ma demande parce que les réponses ici, semble suggérer qu'il serait un peu en désordre.
Cette erreur est facilement traitée par un simple chargement hammer.js. Aucun code nécessaire.
L'autre erreur mentionné dans les commentaires semble avoir été un bug qui est corrigé depuis la rc1.
J'ai été en mesure d'obtenir quelque chose de travail en contournant le haut-Marteau de l'intégration et de la gestion de ma propre:
"EXCEPTION: Hammer.js n'est pas chargé, ne peut pas lier swipeleft événement" est déclenchée, car hammerjs doit être inclus dans la page.
Exemple:
<script src="node_modules/hammerjs/hammer.js"></script>
J'ai lu les autres réponses sur la façon d'utiliser hammerjs angulaire et ils ont l'air hacky.
Par défaut HammerJs a désactivé SwipeDown et SwipeUp méthodes. Toutes les réponses précédentes n'est pas au bon angular2 tapuscrit façon de résoudre les gestes de problème ou de remplacer les paramètres par défaut de marteau.
Il m'a fallu environ 4 heures de creuser dans angular2 et hammerjs s'engage.
Vous êtes ici:
Première chose que nous avons besoin sont hammerjs typings pour angular2.
Ensuite, nous devons créer notre coutume primordial de config de la classe.
Cette classe peut être utilisée pour remplacer le tout par défaut hammerjs et angular2 hammerjs paramètres de configuration.
marteau.config.ts:
Dernière chose que nous devons faire, c'est d'ouvrir notre principal fichier de bootstrap et insérer notre configuration personnalisé dans bootstrap méthode comme ceci:
Maintenant dans notre application, nous pouvons utiliser swipeDown et swipeUp
Ce pull de demande de permis d'écraser les paramètres par défaut et m'a donné le point de départ afin de trouver la bonne façon:
https://github.com/angular/angular/pull/7924
Vous devez ajouter
HelperService
etHammerGesturesPluginCommon
pour les fournisseurs de quelque part, soit dans la@Component(...)
annotation ou dansbootstrap(AppComponent, [...])
pour se débarrasser de l'erreur "Aucun fournisseur pour ..."Avez-vous d'ajouter une balise de script pour
Hammer.js
quelque part sur votre page d'entrée?