角度滑动器幻灯片不捕捉

Question

我正在尝试将Swiper Angular library 实施到我的 Angular 10/Ionic 5 项目中。我遇到的问题是幻灯片没有捕捉到，看起来它只是我可以拖过的一个大页面。

这是我尝试过的入门示例，它显示正确的页面，我相信，但滑动部分似乎有点偏离，没有捕捉，如果你放手它不会继续滑动，如图所示 @987654322 @。

<swiper class ="slide-pic-preview" [slidesPerView]="3" [spaceBetween]="50"
        (swiper)="onSwiper($event)" (slideChange)="onSlideChange()"
        [navigation]="true" [pagination]="{ clickable: true }">

  <ng-template swiperSlide>Slide 1</ng-template>
  <ng-template swiperSlide>Slide 2</ng-template>
  <ng-template swiperSlide>Slide 3</ng-template>
  <ng-template swiperSlide>Slide 4</ng-template>
  <ng-template swiperSlide>Slide 5</ng-template>
  <ng-template swiperSlide>Slide 6</ng-template>
</swiper>

我还在构造函数中安装了导航部分所需的所有组件：

constructor() {
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]); }

导航按钮除了触发 onSlideChange 事件之外什么也不做，正常的滑动也是如此，但不是每个页面，而是每 20 像素拖动一次，事件就会被触发。

并且样式被导入到modules scss文件中。

更新：我刚刚发现调整浏览器窗口的大小可以解决这个问题，现在我只需要找出如何让它工作

Answer 1

这是@R4yYs 的答案，但进行了修改以停止 swiper 索引重置。否则，如果您转到另一个页面/选项卡，这会导致 Ionic/ angular 中的幻灯片索引重置为 0。

 @ViewChild('swiper') swiper: Swiper;
  hasRunContentCheck = false;

  ngAfterContentChecked(): void {
    if (this.swiper && !this.hasRunContentCheck) {
      this.hasRunContentCheck = true;
      this.swiper.updateSwiper({});
    }
  }

Answer 2

所以我自己找到了解决方案：

@ViewChild('swiper') swiper: Swiper;  

  ngAfterContentChecked(): void
  {
    if(this.swiper){
      // @ts-ignore
      //This really works, trust me
      this.swiper.updateSwiper({});
    }
  }

一旦进入用户的视野就更新刷卡器可以解决此问题。