如何在Ionic 2中使用jQuery？

Question

我已经获得了一些我需要用于离子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 );

});

我正在考虑在index.htm中为JQuery库和我给出的jquery代码文件添加一个脚本src标记,但是我无法弄清楚如何将代码导入到我的离子2项目中.

Answer 1

更新于: 12/04/2018

1.首先,在离子项目中安装jQuery:

$ npm install jquery --save

2.之后,将jQuery global derectory安装到typings(这样你就可以导入它):

$ npm install @types/jquery

3.然后,您可以使用以下代码在要使用它的页面/组件中导入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'); }

这应该改变按钮的文本.