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

我是离子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';

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

请帮我解决这个问题,或准备好示例,以便我参考.

谢谢大家！

解决方法

由于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();
    }
}

请注意,我们将carousel初始化添加到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";

玩的开心！

原文地址：https://www.jb51.cc/jquery/180879.html