web-dev-qa-db-fra.com

Comment puis-je utiliser jQuery avec Ionic 2?

On m'a donné du code JQuery que je dois utiliser avec mon projet ionic 2. Comment puis-je l'inclure et la bibliothèque JQuery?

Le code ressemble à ceci (ce n'est qu'une partie de celui-ci):

// on 'Left Down' button click:
jQuery('body').on('click', '.left-down', function (e) {
  
        jQuery('body #top-scale').stop();
        jQuery('body .right-hand-weight').stop();
        jQuery('body .left-hand-weight').stop();
        //top of scale animation
        jQuery("body #top-scale").animate({
                transform: "rotate("+ setWeights(3,0) +"deg)"
        })
        

                //===rotate + reposition each weight *** 
                jQuery("body .right-hand-weight").animate({
                        transform:"rotate("+ getWeights() +"deg) translateX("+getX("right")+"px,"+getY("right")+"px)"
                 })

                jQuery("body .left-hand-weight").animate({
                        transform:"rotate("+ getWeights() +"deg) translateX("+getX("left")+"px,"+getY("left")+"px)"
                 })

                //console.log(getWeights());

                // set number value in weight 
                jQuery( "body .text-1" ).text( leftWeightPercentage );

});

Je pensais mettre une balise src de script dans index.htm pour la bibliothèque JQuery et le fichier de code jquery qui m'a été donné, mais je ne peux pas trouver comment importer le code dans mon projet ionic 2.

jquerytypescriptionic2
15
Bill Noble

Mis à jour à: 12/04/2018

1. Tout d'abord, installez jQuery dans votre ionic:

$ npm install jquery --save

2. Après cela, installez le répertoire global jQuery sur les typages (pour pouvoir l'importer):

$ npm install @types/jquery

. Ensuite, vous pouvez importer JQuery dans la page/le composant où vous souhaitez l'utiliser ( par exemple: home.ts ), avec le code suivant:

import * as $ from 'jquery'

Et c'est tout, maintenant ça devrait marcher.

Vérification:

Pour vérifier si cela a fonctionné, vous pouvez simplement essayer ce qui suit:

1. Dans votre composant/page ( par exemple: home.html ) ajoutez un élément avec un identifiant spécifique ( dans ce cas: myButton ), et une méthode:

<button id="myButton" (click)="changeTextColor()">Click Me!</button>

2. Dans votre composant/page: ( dans ce cas: home.ts ) ajoutez la méthode:

changeColor(){ $('#myButton').text('white'); }

Et cela devrait changer le texte du bouton.

45
Fran Sandi