如何在Angular工作中隐藏的组件中制作滑动器

Question

我想将Swiper与Angular一起使用。

首先显示的app-child1雨刷器正常工作。按下app-child2按钮显示的child2滑动器无法正常工作。

如何使app-child2雨刷器正常工作？

---

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;
}

Repository here

Answer 1

我发现对我们的Angular App中的Swiper重要的两件事

1. 请确保为每个滑动滑块提供单独的ID
2. 确保在初始化滑块之前dom已加载，因此当它尝试找到滑块时，当swiper配置尝试初始化时，它不会隐藏在* ngIf后面。