web-dev-qa-db-fra.com

Comment utiliser correctement (clic) dans ionic 2?

C’est ma première tentative d’utilisation de ionic 2. Mais déjà, j’ai des difficultés. Mais j'essaie… .. Donc, après avoir démarré un nouveau projet, je suis allé voir comment utiliser l'événement click Je cherche et lis à travers le net. Mais toujours pas de réponse appropriée.

J'ai donc utilisé ce code sur un événement de clic sur un bouton.

<button myitem (click)='openFilters()'>CLICK</button>

Et mon fichier .ts ressemble à celui ci-dessous.

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {
    openFilters() {
        console.log('crap');
    }
  }
}

J'ai éventuellement essayé d'ajouter selector: 'myitem', à la partie @component.

angulartypescriptionic2ionic3
11
yudhie.z.kurniawan

Travailler avec la fonction click 

votre code devrait ressembler à ceci

.html 

<button myitem (click)='openFilters();'>CLICK</button>

.ts 

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {

  }

  openFilters() {
        console.log('crap');
    }
}
25
Mohan Gopi

Le code dans l'élément button est parfait. Le problème est que vous avez déclaré la méthode openfilters() dans le constructeur de la classe , afin que le gestionnaire d'événements click ne puisse pas la trouver.

Placez-le en dehors du constructeur, comme autre méthode de la classe, et cela fonctionnera comme prévu.

export class HomePage {
  constructor(private navCtrl: NavController) {
    // ...  
  }

  openFilters() {
    console.log('crap');
  }
}
7
sebaferreras

Les événements de clic poseront un problème de retard sur les appareils iOS. L'utilisateur peut être amené à cliquer plusieurs fois sur l'élément pour que ionic identifie l'événement . La raison de ce problème est invoquée comme étant le bloqueur de clic ionique, qui bloque toute interaction jusqu'à ce qu'une transition soit complètement effectuée. Cela permet de reconnaître si l'utilisateur souhaite un événement click ou un événement double clic sur les périphériques tactiles.

Veuillez vous référer à la solution à - 

http://www.agiliztech.com/2017/05/29/click-handler-reaction-delay-ionic-2/

2
Meghana
@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(private navCtrl: NavController) {}

openFilters() {
        console.log('crap');
    }
}

placez openFilters () en dehors du constructeur.

0
Web Testing

La fonction que vous appelez à partir du modèle est censée être une méthode de la classe HomePage.

export class HomePage {
    constructor(private navCtrl: NavController) {}

    openFilters() {
        console.log('crap')
    }
}
0
CESCO