Ionic2如何在Page中使用JQuery插件

Question

我是 ionic 2 的新手，我创建了项目并且需要 jquery 插件 link 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'.

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

谢谢大家！

Answer 1

由于 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";

玩得开心！

Answer 2

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

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

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

Ionic2如何在Page中使用JQuery插件

Ionic2 How to use JQuery Plugin in Page

jquery

typescript

slick.js

ionic2

angular