Как подружить owl-carousel и Angular 2?

Question

[beta-it]

Суть такая пытаюсь вывести результат GET запроса в owl-carousel.

Библиотеку с Angular я подружил и тестовый пример в шаблоне компонента работает:

Ниже код (шаблон):

<div class="owl-carousel owl-theme">
            <div class="item">
                <h4>1</h4>
            </div>
            <div class="item">
                <h4>2</h4>
            </div>
            <div class="item">
                <h4>3</h4>
            </div>
            <div class="item">
                <h4>4</h4>
            </div>
            <div class="item">
                <h4>5</h4>
            </div>
        </div>

Код компонента:

ngAfterViewInit() {
        $(document).ready(function () {
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                responsiveClass: true,
                autoWidth: false,
                navText: ["Предыдущий", "Следующий"],
                responsive: {
                    0: {
                        items: 1,
                        nav: true
                    },
                    600: {
                        items: 3,
                        nav: false
                    },
                    1000: {
                        items: 5,
                        nav: true,
                        loop: false,
                        margin: 20
                    }
                }
            });
        });
    }

А вот этот код ну ни как не хочет работать:

<div class="owl-carousel owl-theme">
            <div class="item" *ngFor="let t of test">
                <h4>{{t.name}}</h4>
            </div>
        </div>

Answer 1

[beta-it]

В общем решение такое:
Создаем служебную директиву:

import {Directive, Input} from '@angular/core';

@Directive({
    selector: '[scroll]'
})
export class ScrollDirective {

    constructor() {
    }

    @Input('scroll')
    set appScroll(isReady: boolean) {
        if (isReady)
            this.ngForCallback();
    }

    ngForCallback() {
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            autoWidth: false,
            navText: ["Предыдущий", "Следующий"],
            responsive: {
                0: {
                    items: 1,
                    nav: true
                },
                600: {
                    items: 3,
                    nav: false
                },
                1000: {
                    items: 5,
                    nav: true,
                    loop: false,
                    margin: 20
                }
            }
        });

        console.log('run');
    }
}

И в шаблоне:

.....
<div class="owl-carousel owl-theme">
    <div class="item" *ngFor="let t of test; let l=last" [scroll]="l ? true : false">
        <h4>{{t?.name}}</h4>
    </div>
</div>
.....

Судя по консоли ( console.log('run') ) срабатывает всего один раз...

Answer 2

[Андрей]

Инициировать карусель, то есть делать вот это:

$('.owl-carousel').owlCarousel({
....
}))

необходимо где-то в каллбэке.
У вас получается следующая очередность событий:
1 . GET-запрос
2. ngAfterViewInit() - тут вы ждете события готовности DOM и инициируете карусель
3. Возвращаются данные
4. Отрабатывает цикл *ngFor и создаются элементы (карусель о них ничего уже не узнает)

А вам нужно, чтобы карусель инициировалась после того, как данные будут получены и *ngFor отработает.
Вот пример как сделать каллбэк на *ngFor:

<li *ngFor="let item in Items; let last = last">
  ...
  <span *ngIf="last">{{ngForCallback()}}</span>
</li>

public ngForCallback() {
  ...
}

Пример взят отсюда

Comments

[beta-it]

Спасибо, вроде как получается выводить, но ngForCallback отрабатывает нереальное количество раз?

У меня сейчас получается такой вид:

public ngForCallback() {
        $(document).ready(function () {
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                responsiveClass: true,
                autoWidth: false,
                navText: ["Предыдущий", "Следующий"],
                responsive: {
                    0: {
                        items: 1,
                        nav: true
                    },
                    600: {
                        items: 3,
                        nav: false
                    },
                    1000: {
                        items: 5,
                        nav: true,
                        loop: false,
                        margin: 20
                    }
                }
            });
        });
        
        console.log('run');
    }

P.s.: console.log('run'); - отрабатывает значительное количество раз.

и вид:

<div class="owl-carousel owl-theme">
    <div class="item" *ngFor="let t of test; let last = last">
        <span *ngIf="last">{{ngForCallback()}}</span>
        <h4>{{t?.name}}</h4>
    </div>
</div>

Я правильно Вас понял?

[Андрей]

Aleksandr Semenov: да, наверное плохая идея делать такой каллбек в шаблоне, который перерисовывается на каждый чих. Попробуйте лучше инициировать в коллбеке аякс-запроса.
Кстати, обертка там не нужна совсем, можно так сделать:

$('.owl-carousel').owlCarousel({
                loop: true,
                margin: 10,
                responsiveClass: true,
                autoWidth: false,
                navText: ["Предыдущий", "Следующий"],
                responsive: {
                    0: {
                        items: 1,
                        nav: true
                    },
                    600: {
                        items: 3,
                        nav: false
                    },
                    1000: {
                        items: 5,
                        nav: true,
                        loop: false,
                        margin: 20
                    }
                }
            });

[beta-it]

Попробуйте лучше инициировать в коллбеке аякс-запроса.

Не совсем Вас понял? я ранее уже пытался после выполнения запроса данных вешать инициализацию карусели но ни чего не вышло...

[Андрей]

Aleksandr Semenov: покажите пожалуйста код.
Вероятно, вы получали данные, отправляли их в шаблон и, не дождавшись отрисовки (а она асинхронная) инициализировали карусель.
Тут варианта два:
1. Инициировать карусель асинхронно:

// тут передаем данные в шаблон
// затем инициируем карусель
setTimeout(()=>{
$('.owl-carousel').owlCarousel({
....
}))
}, 0)

2. Используем вариант с каллбэком в шаблоне, но делаем флаг carouselInited=true после инициализации и проверяем его, чтобы при каждой перерисовке шаблона не инициировать повторно.

Оба варианта - костыли. Но ИМХО само наличие Jquery и его плагина в Ангуляре ведет к таким уродливым решениям.
И да, я знаю, что другого варианта нет :) Сам недавно был в аналогичной ситуации.

[beta-it]

Андрей, а что Вы думаете над решением которое ниже?

[Андрей]

Aleksandr Semenov: по сути тот же коллбек с флагом, но изолированный в директиву. Очень хорошее с точки зрения чистоты кода и читабельности решение.

[beta-it]

Андрей: Спасибо за ответы.

[beta-it]

Андрей: можете по подробнее показать как инициализировать карусель после запроса, setTimeout(()=>{

$('.owl-carousel').owlCarousel({
....
}))
}, 0)

у меня не сработало, возможно просто что то делаю не так, спрашиваю так как возникла необходимость выбирать интервал дат и перезапрашивать результат и соответственно инициализировать карусель.

[Андрей]

Aleksandr Semenov: Вообще это так себе практика. Костыль.
У Вас же приличное решение с директивой есть. Попробуйте просто удалять элемент div class="owl-carousel owl-theme" перед запросом и вставлять его снова с новыми данными когда они придут. Тогда директива снова будет срабатывать. Директива *ngIf привязанная к какому-нибудь свойству позволит это сделать.

<div class="owl-carousel owl-theme"  *ngIf="carouselUpdated">
    <div class="item" *ngFor="let t of test; let l=last" [scroll]="l ? true : false">
        <h4>{{t?.name}}</h4>
    </div>
</div>

Перед аякс запросом свойство carouselUpdated ставить в false, после успешного запроса - true