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

Създадох два компонента в Angular 2:

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

Компонент на страница: Всеки слайд е Компонент на страница и има събития за обработка на въвеждане от потребителя (щракване, щипване, двойно докосване)

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

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

Това наистина добавя елемент от <my-page-component>, но не изобразява шаблона или обработва някое от събитията PageComponents.

Опитах се да добавя всички PageComponents към масив и да го изобразя в шаблон ReaderComponents:

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

Това се изобразява правилно, но дотогава всички страници се изобразяват. Owl вече е стартиран и не се виждат страници.

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


person Bagera    schedule 28.10.2015    source източник
comment
Възможен дубликат на Как да използвам owl-carousel в Angular2?   -  person Murhaf Sousli    schedule 07.07.2016


Отговори (1)


Първият метод, който споменахте, ще изисква от вас да принудите angular да провери отново неговите обвързвания. Това вероятно е възможно, но не знам на ум.

Вторият метод е много по-лесен. Можете да използвате събитията от жизнения цикъл на компонентите на страницата или четеца, за да задействате добавянето. Те са както следва:

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