web-dev-qa-db-fra.com

Double Tap/double clic Angular2 & ionic

Je cherche sur de nombreux forums et questions, mais personne ne semble se demander comment double-cliquer ou double-taper dans Angular/ionic 2? 

Dans ionic v1, il était disponible avec on-double-tap (voir http://ionicframework.com/docs/api/directive/onDoubleTap/ )

Est-ce que quelqu'un a peut-être un conseil ou un code pour capturer les événements en double-clic sur ionic 2/angular 2? 

Peut-être par HammerJS?

Merci beaucoup ! Luis :) 

angularionic2directiveangular2-directivesdouble-click
6
luiswill

Après 1-2 heures, il était évident que vous n'aviez plus besoin de capturer des événements en double-clic avec Ionic, mais avec JavaScript: dblclick() 

Donc, dans Angular 2, ce serait: (dblclick)="myFunction()" et le tour est joué!

Vous trouverez ici d'autres événements pour JavaScript .

12
luiswill

fichier html

<button (tap)="tapEvent()">Tap Me!</button>

fichier ts

let count : number = 0;
tapEvent(){
this.count++;
setTimeout(() => {
  if (this.count == 1) {
    this.count = 0;
    alert('Single Tap');
  }if(this.count > 1){
    this.count = 0;
    alert('Double Tap');
  }
}, 250);

}

2
Toprak Erzurumluoglu

Pour utiliser le même bouton pour un clic simple et un double clic, la fonction setTimeout peut vous aider. Il doit être utilisé avec la mise en oeuvre de la flèche =>.

html template

<button (click)="simpleClickFunction()" (dblclick)="doubleClickFunction()">click me!</button>

Component

simpleClickFunction(): void{
    this.timer = 0;
    this.preventSimpleClick = false;
    let delay = 200;

    this.timer = setTimeout(() => {
      if(!this.preventSimpleClick){
        //whatever you want with simple click go here
        console.log("simple click");
      }
    }, delay);

  }

  doubleClickFunction(): void{
    this.preventSimpleClick = true;
    clearTimeout(this.timer);
    //whatever you want with double click go here
    console.log("double click");
  }
2
edkeveked

Ionic 2 a des gestes de base auxquels on peut accéder depuis HTML . Devrait fonctionner sur iOS et Android . Vous pouvez trouver la documentation ici .

Le code source fourni par eux est ici .

0
Borja Perez