Ionic2 Jak używać jQuery Plugin w Page

Question

jestem nowicjuszem jonowego 2, tworzę projekt i trzeba jquery plugin łącza ColorBox, zręczny-karuzeli ...

mam uruchomić komendę w terminalu

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

mam importowane jQuery:

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

błąd Następnie jonowy jest: Can not find module 'slick-carousel'.

Proszę, pomóżcie mi rozwiązać ten problem lub przygotujcie przykłady, abym mógł się do tego odnieść.

Dzięki!

Answer 1

Ponieważ slick-carousel nie ma żadnych wyeksportowanych modułów (po prostu dodaje funkcje łańcuchowe do jQuery), metoda importowania jest inna. Oto minimalne przykład:

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

Zauważ, że dodamy inicjalizacji karuzela do obsługi ionViewLoaded() zdarzeń, aby upewnić się, że DOM jest załadowany. A następnie szablon:

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

i wreszcie pilnuje importowania CSS dodając to do pliku app/theme/app.core.scss:

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

Baw się!

Answer 2

Jeśli ktoś to czyta to w 2017 roku:

Strona wydarzenia ionViewLoaded() nie jest już ważny. To jest ionViewDidLoad() w aktualnej wersji RC4.

Na przyszłość: http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events