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

问题描述

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

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

我运行命令在终端

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>

最后，确保通过将CSS添加到应用程序来导入CSS /theme/app.core.scss file：

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插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！