Ionic2如何使用jQuery插件頁面

我的離子2新手，我創建的項目和需要的jQuery插件的鏈接顏色框，華而不實的傳送帶......Ionic2如何使用jQuery插件頁面

我在終端上運行命令

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'.

請幫我解決這個問題，或者準備好可以參考的例子。

謝謝大家！

來源

2016-07-02 Nho Huynh

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

玩得開心！

來源

2016-07-03 03:20:49 morphatic

它做工精細，謝謝@morphatic –

以及如何使用jQuery的顏色框離子。我導入並使用，但錯誤： TypeError：$（...）。colorbox不是函數 import * as $ from'jquery'; import'jquery-colorbox'; use： ngAfterViewInit（）{（'。colorbox'）。colorbox（）; } –

盡我所知，'jquery-colorbox'插件尚未更新，可與任何模塊加載方案（Node，AMD，UMD等）一起使用。你可以看看[angular-colorbox']（https://github.com/igorlino/angular-colorbox），它似乎是一個專門用於Angular的重寫。相反，您可能也會考慮使用[Ionic2幻燈片]（http://ionicframework.com/docs/v2/components/#slides），該框架是框架的原生設計，用於執行「jquery-colorbox」的功能。 – morphatic

如果有人在其2017年閱讀本：

頁事件ionViewLoaded()不再有效。在當前RC4版本中爲ionViewDidLoad()。

以供將來參考： http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events

來源

2017-01-12 11:05:34

Ionic2如何使用jQuery插件頁面

回答

相關問題