Слайды не работают, если слайд обернут в пользовательский компонент - PullRequest
Новая
       6

Слайды не работают, если слайд обернут в пользовательский компонент

1 голос
/ 08 января 2020

Я хочу обернуть свой компонент слайда в свой собственный компонент для достижения методологии ATOM. Но поскольку ion-slide не является прямым потомком ion-slides, он больше не обнаруживает несколько слайдов.

Это мой app-slide компонент: 

<ion-slide>
  <ng-content></ng-content>
</ion-slide>

Затем я вызываю это так: 

<ion-slides>
  <app-slide>Test</app-slide>
  <app-slide>Test 2</app-slide>
  <app-slide>Test 3</app-slide>
</ion-slides>

Stackblitz: https://stackblitz.com/edit/ionic-v4-x7wgrz

Есть ли способ игнорировать родителя? Или как еще я мог сделать эту работу?

Ответы [ 2 ]

3 голосов
/ 08 января 2020

Вам просто нужны некоторые изменения в вашей структуре. Пожалуйста, попробуйте следующий код.

Вот рабочий код. https://stackblitz.com/edit/ionic-v4-zwjta3

<ion-slides>
    <ion-slide>
        <app-slide>Test</app-slide>
    </ion-slide>
    <ion-slide>
        <app-slide>Test 2</app-slide>
    </ion-slide>
    <ion-slide>
        <app-slide>Test 3</app-slide>
    </ion-slide>
</ion-slides>

Ваш файл компонента должен выглядеть следующим образом. 

<ng-content></ng-content>

Пожалуйста, дайте мне знать, если это поможет.

1 голос
/ 08 января 2020

Я смог решить эту проблему, используя класс swiper-slide, как это было изначально сделано в swiperjs. 

<ion-slides>
  <app-slide class="swiper-slide">Test</app-slide>
  <app-slide class="swiper-slide">Test 2</app-slide>
  <app-slide class="swiper-slide">Test 3</app-slide>
</ion-slides>

Еще более удачное решение, чтобы не вводить класс вручную каждый раз, добавляет HostBinding к app-slide компоненту, например так: 

@HostBinding('class.swiper-slide') swiperSlide: boolean = true;

Рабочий пример: https://stackblitz.com/edit/ionic-v4-x7wgrz

...