Как заставить работать Swiper в компоненте, скрытом в Angular - PullRequest
Новая
       18

Как заставить работать Swiper в компоненте, скрытом в Angular

0 голосов
/ 09 января 2020

Я хочу использовать Swiper с Angular.

Первый отображаемый app-child1 Swiper работает нормально.
app-child2 Swiper отображается при нажатии child2 кнопка не работает должным образом.

Как мне заставить app-child2 Swiper работать должным образом?

app.component. html

<swiper-container [options]="swipeOptions" #homeSlide>
  <swiper-slide>
    app.comp.slide1
  </swiper-slide>
  <swiper-slide>
    app.comp.slide2
  </swiper-slide>
  <swiper-slide>
    app.comp.slide3
  </swiper-slide>
</swiper-container>

<hr />

<app-child1 [hidden]="isChild1"></app-child1>
<app-child2 [hidden]="isChild2"></app-child2>

<hr />

<button type="button" (click)="display1()">child1</button>
<button type="button" (click)="display2()">child2</button>

app .component.ts 

isChild1 = true;
isChild2 = false;

display1() {
  this.isChild1 = true;
  this.isChild2 = false;
}
display2() {
  this.isChild1 = false;
  this.isChild2 = true;
}

Хранилище здесь

1 Ответ

0 голосов
/ 09 января 2020

2 вещи, которые я обнаружил, которые важны для Swiper в нашем Angular приложении

  1. Убедитесь, что вы даете каждому идентификатору ползунка swiper индивидуальные идентификаторы
  2. Убедитесь, что домен загружен до инициализация слайдера, поэтому, когда он пытается найти слайдер, он не скрывается за * ngIf, когда конфигурация swiper пытается инициировать.
...