Angular 2 добавляет пользовательский компонент в Owl Carousel 2

Я создал два компонента в Angular 2:

ReaderComponent: тот, который инициирует и контролирует все функции Owl Carousel (инициация, добавление слайда, удаление слайда и т. д.)

PageComponent: каждый слайд является PageComponent и имеет события для обработки ввода от пользователя (щелчок, сжатие, двойное касание).

ReaderComponent создается при запуске приложения и инициирует запрос к службе для получения всех данных для каждого из PageComponents. Все работает нормально, пока мы не добавим слайд, который является PageComponent. Я попытался добавить селектор PageComponent в сову карусель:

this.slider.trigger("add.owl.carousel", ["<my-page-component></my-page-component>"]);

Это добавляет элемент <my-page-component>, но не отображает шаблон и не обрабатывает какие-либо события PageComponents.

Я попытался добавить все компоненты страницы в массив и отобразить его в шаблоне ReaderComponents:

<div *ng-for="#page of pages">
    <my-page></my-page>
</div>

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

Итак, резюмируя все это: мне нужно знать, как добавить пользовательский компонент через javascript (в данном случае добавление функций Owl)? Это вообще возможно? Или есть другой способ справиться с этим, чтобы я мог каким-либо образом добавить PageComponent?


javascript angular jquery owl-carousel
person Bagera    schedule 28.10.2015    source источник
comment
Возможный дубликат Как использовать owl-carousel в Angular2?   -  person Murhaf Sousli    schedule 07.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

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

Второй способ намного проще. Вы можете использовать события жизненного цикла компонентов Page или Reader, чтобы инициировать добавление. Они следующие:

export var LIFECYCLE_HOOKS_VALUES = [
  LifecycleHooks.OnInit,
  LifecycleHooks.OnDestroy,
  LifecycleHooks.DoCheck,
  LifecycleHooks.OnChanges,
  LifecycleHooks.AfterContentInit,
  LifecycleHooks.AfterContentChecked,
  LifecycleHooks.AfterViewInit,
  LifecycleHooks.AfterViewChecked
];

Если вы добавите прослушиватель в свой класс PageComponent, вы, вероятно, можете использовать OnInit или AfterViewChecked, а затем заставить его добавить ссылку на собственный элемент в карусель (базовый пример). Из беглого взгляда на их документацию не похоже, что owl поддерживает добавление нового элемента, так что вы могли бы скрыть все PageComponents на своей странице где-нибудь, а затем просто добавить необработанный html из elementref, а затем снова удалить его в Функция OnDestroy.

Если вы делаете это в ReaderComponent, вы должны посмотреть OnChanges или добавить несколько умных проверок в функцию DoCheck, а затем просто заставить ее перезагрузить все элементы внутри нее (возможно, owl.reinit?). Я раньше не пользовался каруселью совы, поэтому, боюсь, не могу быть более конкретным.

Они экспортируются из класса angular как интерфейсы, поэтому вы должны расширять свои классы от них. Пример доступен на веб-сайте Angular 2 здесь: https://angular.io/docs/ts/latest/api/lifecycle_hooks/AfterViewChecked-interface.html

person Ben Morton    schedule 29.10.2015