如何在 ionic 3 中使用 jquery答案

【问题标题】：How to use jquery in ionic 3如何在 ionic 3 中使用 jquery
【发布时间】：2018-03-31 03:19:04
【问题描述】：

我正在尝试使用 ionic 3 中的 jquery 在 div 中加载外部网站。

TS：

export class HomePage 
{
  constructor(public navCtrl: NavController) {    
      $('#loadExternalURL').load('http://www.google.com');
  }
}

HTML：

<ion-content>
    <div id="loadExternalURL"></div>
</ion-content>

我在为 ionic 应用程序提供服务时出现黑屏。有什么我想念的吗？有什么建议吗？

【问题讨论】：

有控制台日志吗？
你包含 jquery 库吗？
@Luke 日志控制台为空。
@Walk 是的，我已经包含了 jquery 库。使用以下命令安装 jquery 库 npm install jquery --save 和 typings install dt~jquery --global --save
看看这个forum.ionicframework.com/t/use-ionic-with-jquery/1120/12

标签： javascript jquery ionic3

【解决方案1】：

要在 ionic 项目中使用 jQuery，请这样做：

在您的 IONIC-3 应用程序中安装 Jquery 模块，如下所示：

1, npm install jquery --save
2, npm install @types/jquery

然后像这样在您的页面上导入 jquery

3, import * as $ from "jquery";

然后您可以像在普通 javascript 中一样使用 jquery $。我已经将它用于 jquery ajax 调用来获取这样的远程数据：

 $.ajax({
    url: "my api url",
    method: "POST", //you can do post, get, put
    data: my-data
}).done(function(res){
     //process response from server
}).fail(function(err){
     //return error message.
});

效果很好。

【讨论】：

是的，它需要确保满足所有必要的依赖关系才能在您的 ionic 3 应用程序中无缝使用 jquery 而不会出现问题

【解决方案2】：

你不需要使用 jQuery

你可以添加 iframe

<div>
    <iframe src="yourexternalpage url"></iframe>
</div>

【讨论】：

【解决方案3】：

我是按照下面的方式做的，

在您的 IONIC-3 应用中安装 Jquery 模块，

npm install jquery --save
在 HomePage.ts 中导入 JQuery

从 "jquery" 导入 * 作为 $；
使用$调用jquery方法。

我等待方法 ngAfterViewInit 以确保视图已初始化。

ngAfterViewInit(){
    $(document).ready(function(){
        alert('JQuery is working!!');
    });
}

【讨论】：

可能也想安装打字机。

【解决方案4】：

您需要以某种方式将 jQuery 导入您的项目。如果你想使用 HTML，你需要在页面顶部附近添加它

<script src="[path to jQuery source]"></script>

或者使用定义 jQuery 的 .d.ts 文件

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

然后在需要的地方定义它

<reference path="jquery.d.ts" />

参考文献：

TypeScript and libraries such as jQuery (with .d.ts files)

How do I get jQuery autocompletion in TypeScript?

【讨论】：