如何在 Ionic 2 中使用 jQuery？

Question

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

});

我想在 index.htm 中为 JQuery 库和给定的 jquery 代码文件放置一个脚本 src 标记，但我不知道如何将代码导入到我的 ionic 2 项目中。

Answer 1

更新于： 2018 年 12 月 4 日

1. 首先，在你的 ionic 项目中安装 jQuery：

$ npm install jquery --save

2. 之后，将 jQuery 全局目录安装到类型中（这样你就可以导入它了）：

$ npm install @types/jquery

3.然后，您可以在您要使用它的页面/组件中导入JQuery（例如：home.ts），代码如下：

import * as $ from 'jquery'

就是这样，现在它应该可以工作了。

---

检查：

要检查它是否有效，您可以简单地尝试以下方法：

1.在您的组件/页面（例如：home.html）中添加一个具有特定 id 的元素（在本例中为：myButton em>)，以及一个方法：

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

2. 在您的组件/页面中：（在本例中：home.ts）添加方法：

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

这应该会改变按钮的文本。