Ionic2 如何在页面中使用 JQuery 插件

Posted 2023-03-13

【中文标题】Ionic2 如何在页面中使用 JQuery 插件

【英文标题】：Ionic2 How to use JQuery Plugin in Page

【发布时间】：2016-11-04 16:31:18

【问题描述】：

我是 ionic 2 的新手，我创建项目并需要 jquery 插件链接 colorbox、slick-carousel...

我已经在终端中运行了命令

npm install jquery slick-carousel
typings install jquery --ambient --save
typings install slick-carousel --ambient --save

我已经导入了 JQuery：

import * as JQuery from 'jquery';
import * as slick from 'slick-carousel';

那么离子错误是：Can not find module 'slick-carousel'.

请帮我解决这个问题，或者准备好例子供我参考。

谢谢大家！

【参考方案1】：

如果有人在 2017 年读到这篇文章：

页面事件ionViewLoaded() 不再有效。 在当前的 RC4 版本中是ionViewDidLoad()。

供日后参考： http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events

【参考方案2】：

由于slick-carousel 没有任何导出模块（它只是将可链接的函数添加到jQuery 上），因此导入它的方法不同。这是一个最小的例子：

// app/pages/carousel/carousel.ts
import  Component  from "@angular/core";
import  NavController  from "ionic-angular";
import * as $ from "jquery";
import "slick-carousel";

@Component(
    templateUrl: "build/pages/carousel/carousel.html"
)
export class CarouselPage 

    constructor(public nav: NavController) 

    ionViewLoaded() 
        $(".myCarousel").slick();
    

请注意，我们将轮播初始化添加到 ionViewLoaded() 事件处理程序以确保 DOM 已加载。然后是模板：

<!-- app/pages/carousel/carousel.html -->
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Carousel</ion-title>
</ion-navbar>

<ion-content padding class="carousel">
  <div class="myCarousel">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</ion-content>

最后，确保通过将其添加到 app/theme/app.core.scss 文件中来导入 CSS：

@import "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css";

玩得开心！

【讨论】：

以及如何在 ionic 中使用 jquery colorbox。我导入并使用，但报错：TypeError: $(...).colorbox is not a function import * as $ from 'jquery';导入'jquery-colorbox'；使用：ngAfterViewInit() $('.colorbox').colorbox();

据我所知，jquery-colorbox 插件尚未更新以适用于任何模块加载方案（Node、AMD、UMD 等）。您可能会看一下angular-colorbox，它似乎是为与 Angular 一起工作而设计的重写。相反，您可能还会考虑使用框架原生的 Ionic2 slides，它旨在完成 jquery-colorbox 所做的事情。

我在 iframe-resizer 插件中看到了与@JLamp07 相同的问题。不幸的是，angular-colorbox（至少是您链接到@morphatic 的 github 项目）特定于 angular 1，默认情况下它不使用 webpack，因此从我所见，它在这种情况下没有帮助。有人遇到过解决方案吗？

@morphatic 我正在添加翻转时钟并按照您的步骤操作，但仍然出现错误“找不到模块“翻转时钟””。如果您有任何想法，请帮助我。

@vedankitakumbhar 您是否像安装任何其他模块一样安装了翻转时钟，即npm install -S flipclock？那个包看起来好几年没更新了。请参阅我之前的评论，并非所有软件包都已更新为使用模块加载方案。这可能是其中之一。