Ionic2 Как использовать плагин JQuery на странице

Я новичок в ionic 2, я создаю проект, и мне нужно jquery плагин ссылка colorbox, Slick-карусель ...

Я выполнил команду в терминале

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

Пожалуйста, помогите мне решить эту проблему или подготовьте примеры, чтобы я мог обратиться к ним.

Спасибо всем!

Ответы на вопрос(2)

Решение Вопроса

поскольку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>

И, наконец, убедитесь, что вы импортируете CSS, добавив это в свойapp/theme/app.core.scss файл:

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

Повеселись!

 Nho Huynh03 июл. 2016 г., 06:24
все работает нормально, спасибо @ morphatic
 morphatic20 февр. 2018 г., 17:53
Извините, нет, не совсем.
 morphatic03 июл. 2016 г., 18:44
Насколько я могу судить,jquery-colorbox Плагин не был обновлен для работы с любой из схем загрузки модулей (Node, AMD, UMD и т. д.). Вы могли бы взглянуть наangular-colorbox который, кажется, переписан для работы с Angular. И наоборот, вы также можете посмотреть на использованиеIonic2 слайды который является родным для фреймворка и предназначен для того, чтобы делать то, чтоjquery-colorbox делает.
 vedankita kumbhar19 февр. 2018 г., 10:25
Спасибо @ morphatic. Знаете ли вы какой-нибудь плагин обратного отсчета с некоторыми продвинутыми эффектами, которые я могу использовать в Ionic2?
 morphatic19 февр. 2018 г., 09:56
@vedankitakumbhar Вы установили Flipclock так же, как и любой другой модуль, т.е.npm install -S flipclock? Похоже, этот пакет не обновлялся в течение нескольких лет. Смотрите мой предыдущий комментарий, что не все пакеты были обновлены для использования схемы загрузки модулей. Это может быть одним из тех.
 vedankita kumbhar19 февр. 2018 г., 09:29
@ morphatic Я добавляю flipclock и выполнил ваши действия, но все еще получаю сообщение об ошибке "Не удается найти модуль" flipclock "". Пожалуйста, помогите мне, если у вас есть идеи.
 Sean19 янв. 2017 г., 01:06
Я вижу ту же проблему, что и @ JLamp07 с плагином iframe-resizer. К сожалению, angular-colorbox (по крайней мере, проект github, который вы связали с @morphatic) специфичен для angular 1, который по умолчанию не использует webpack, поэтому в данном случае он бесполезен. Кто-нибудь сталкивался с решением?
 Nho Huynh03 июл. 2016 г., 11:21
И как использовать JQuery Colorbox в ионном. Я импортирую и использую, но ошибка: TypeError: $ (...). Colorbox не является функцией import * as $ from 'jquery'; импортировать jquery-colorbox; use: ngAfterViewInit () {$ ('. colorbox'). colorbox (); }

Событие страницыionViewLoaded() больше не действует этоionViewDidLoad() в текущей версии RC4.

Для дальнейшего использования:http://ionicframework.com/docs/v2/api/navigation/NavController/#lifecycle-events

Ваш ответ на вопрос