Angular中SwiperJS设置initialSlide非0时slideChange事件报错

问题情况 #

• 为Swiper组件的slideChange事件绑定了打印activeIndex的方法，原本运行正常
• 当添加[initialSlide]="2"后，应用加载时抛出错误：Cannot read property of undefined(reading 'activeIndex')
• 改为[initialSlide]="0"则无报错

相关代码 #

HTML代码

<swiper
  #swipper
  [lazy]="true"
  [preloadImages]="false"
  [autoHeight]="true"
  loadPrevNext="true"
  loadPrevNextAmount="1"
  [slidesPerView]="1"
  [spaceBetween]="0"
  [initialSlide]="2"
  (swiper)="onSwiper($event)"
  (slideChange)="onSlideChange()"
  [navigation]="true"
  dir="rtl"
>
  <ng-template swiperSlide let-data> <app-p1></app-p1></ng-template>
  <ng-template swiperSlide let-data> <app-p2></app-p2></ng-template>
  <ng-template swiperSlide let-data> <app-p3></app-p3></ng-template>
  <ng-template swiperSlide let-data> <app-p4></app-p4></ng-template>
  <ng-template swiperSlide let-data> <app-p5></app-p5></ng-template>
</swiper>

TS代码

@ViewChild('swipper') private swipperREF: any;

onSlideChange() {
  console.log(this.swipperREF.swiperRef.activeIndex);
}

原因分析 #

设置initialSlide为非0值时，Swiper初始化过程中会自动切换到指定slide，此时会触发slideChange事件，但通过@ViewChild获取的swipperREF内部的swiperRef还未完成初始化赋值，导致访问activeIndex时出现undefined错误。而设置initialSlide="0"时，组件初始加载就是第0个slide，不会触发额外的slideChange事件，因此不会报错。

解决方案 #

方案1：通过(swiper)事件保存实例（推荐） #

利用组件提供的(swiper)事件获取初始化完成的Swiper实例，替代@ViewChild的方式：

private swiperInstance: any;

onSwiper(event: any) {
  this.swiperInstance = event;
}

onSlideChange() {
  if (this.swiperInstance) {
    console.log(this.swiperInstance.activeIndex);
  }
}

(swiper)事件会在Swiper实例完全初始化后触发，后续slideChange时可以安全访问实例的属性。

方案2：添加可选链判断避免报错 #

直接修改onSlideChange方法，使用可选链操作符确保属性存在时再访问：

onSlideChange() {
  console.log(this.swipperREF?.swiperRef?.activeIndex);
}

这样即使初始化未完成，也不会抛出错误，等swiperRef就绪后就能正常打印索引。

方案3：配置ViewChild的static属性（Angular 8+） #

修改@ViewChild的定义，添加{ static: true }配置，让组件在初始化阶段就获取到Swiper元素：

@ViewChild('swipper', { static: true }) private swipperREF: any;

注意：如果Swiper组件是嵌套在异步加载的内容中（比如*ngIf内部），此方案可能无效，优先推荐方案1。

内容的提问来源于stack exchange，提问作者Ahmad Dawood