Обновить сова-карусель в Angular - PullRequest
Новая
       33

Обновить сова-карусель в Angular

0 голосов
/ 22 сентября 2019

У меня есть некоторые проблемы с каруселью сов, связанные с динамическими изменениями, такими как количество слайдов и т. Д. - другими словами, карусель может сломаться после некоторых изменений.

Мой подход состоял в том, чтобы перезагрузить / обновить карусель - но как?

В Интернете я обнаружил, что вы должны обновить его по классу: 

$owl.trigger('refresh.owl.carousel');

Но как мне это сделать?перевести это на Angular / Typescipt?

1 Ответ

0 голосов
/ 22 сентября 2019

Итак, пока вы используете ngx-owl-carousel (после вашего комментария), ваша реализация может выглядеть следующим образом. 

// component template

<owl-carousel [items]="images" #owlElement>
     <div class="item" *ngFor="let image of images;let i = index">
         <div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
     </div>
 </owl-carousel>

Пожалуйста, обратите внимание на owlElement переменную шаблона

Затем, если вы хотите обработать или инициировать некоторые действия, вы можете обратиться к этому элементу 

// Component class

import {OwlCarousel} from 'ngx-owl-carousel';

export class HomeComponent {

@ViewChild('owlElement') owlElement: OwlCarousel

   refresh() {
     this.owlElement.refresh()
   }
}

Вы можете вызывать любые события из 1011 * оригинальной документации , используя метод триггера (trigger(action: string, options?: any[])).

...