web-dev-qa-db-ja.com

jQueryをIonic 2と一緒に使用するにはどうすればよいですか？

ionic 2プロジェクトで使用する必要があるいくつかのJQueryコードが与えられました。それとJQueryライブラリを含めるにはどうすればよいですか？

コードは次のようになります（これはほんの一部です）。

// 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 );

});

与えられたJQueryライブラリとjqueryコードファイルのindex.htmにスクリプトsrcタグを置くことを考えていましたが、ionic 2プロジェクトにコードをインポートする方法がわかりません。

jquerytypescriptionic2
15
Bill Noble

更新日： 12/04/2018

1。まず、ionicプロジェクトにjQueryをインストールします。

_$ npm install jquery --save_

2。その後、jQueryグローバルディレクトリを入力にインストールします（インポートできるように）。

_$ npm install @types/jquery
_

。次に、使用したいページ/コンポーネントにJQueryをインポートできます（例：home.ts）、次のコード：

_import * as $ from 'jquery'_

そして、それがすべてで、今では機能しているはずです。

チェック：

動作したかどうかを確認するには、次を試してください：

1。コンポーネント/ページに（たとえば：home.html）特定のid（この場合：myButton）、およびメソッド：

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

2。コンポーネント/ページ：（この場合：home.ts）メソッドを追加します：

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

そして、それはボタンのテキストを変更するはずです。

45
Fran Sandi