Ionic2 Wie in Seite JQuery Plugin verwendet

Question

Ich bin ein Neuling ionischer 2, i-Projekt erstellen und benötigen Link colorbox zu jQuery-Plugin, Slick-Karussell ...

ich den Befehl in einem Terminal ausgeführt habe

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

ich habe die JQuery importiert:

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

Dann ionische Fehler ist: Can not find module 'slick-carousel'.

Bitte helfen Sie mir, dieses Problem zu lösen, oder haben Sie Beispiele bereit, damit ich mich darauf beziehen kann.

Vielen Dank!

Answer 1

Da slick-carousel keine exportierten Module enthält (es fügt einfach kettenfähige Funktionen in jQuery ein), ist die Methode zum Importieren anders. Hier ist ein minimales Beispiel:

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

Beachten Sie, dass wir das Karussell Initialisierung der ionViewLoaded() Ereignishandler hinzufügen, um sicherzustellen, dass das DOM geladen wird. Und dann die Vorlage:

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

Und schließlich stellt sicher, dass Sie die CSS importieren, indem Sie diesen in Ihre app/theme/app.core.scss Datei:

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

Viel Spaß!

Answer 2

Wenn jemand es dies im Jahr 2017 zu lesen:

Die Seite Ereignis ionViewLoaded() ist nicht mehr gültig. Es ist ionViewDidLoad() in der aktuellen RC4-Version.

Für die Zukunft: http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events