Ionic2 如何在页面中使用 JQuery 插件 [英] Ionic2 How to use JQuery Plugin in Page

问题描述

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

I'm a newbie of ionic 2, i create project and need to jquery plugin link colorbox, slick-carousel...

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

I've run the command in a terminal

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

我已经导入了 JQuery:

I have imported the JQuery:

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

然后离子错误是:找不到模块'slick-carousel'.

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

Please help me solve this problem, or have examples ready so I can refer to.

谢谢大家！

推荐答案

由于 slick-carousel 没有任何导出模块(它只是在 jQuery 上添加了可链接的函数)，因此导入它的方法是不同的.这是一个最小的例子:

Since slick-carousel doesn't have any exported modules (it just adds chainable functions onto jQuery) the method for importing it is different. Here's a minimal example:

// 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 已加载.然后是模板:

Note that we add the carousel initialization to the ionViewLoaded() event handler to make sure the DOM is loaded. And then the template:

<!-- 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:

And finally, makes sure you import the CSS by adding this to your app/theme/app.core.scss file:

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

玩得开心！

这篇关于Ionic2 如何在页面中使用 JQuery 插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！