Angular结合SwiperJS实现父滑块变更时重置嵌套子滑块索引

1. 修改模板代码，传递父滑块索引 #

在父级*ngFor循环中增加索引参数，子滑块初始化时将索引传入事件，用于绑定对应实例：

<!-- 父滑块循环部分增加索引i -->
<ng-template swiperSlide *ngFor="let company of companies; let i = index">
  <div class="text-white">
    <!-- 子swiper的(swiper)事件传递当前父索引i -->
    <swiper [config]="horizontalConfig"
      (swiper)="onHorizontalSwiper($event, i)" 
      (transitionEnd)="onHorizontalTransitionEnd($event)"
      (slideChange)="onHorizontalSlideChange($event)">
      <!-- 原有子滑块内容不变 -->
    </swiper>
  </div>
</ng-template>

原来的[attr.ib]属性可以删除，不需要额外标记。

2. 修改TS代码，存储所有子Swiper实例 #

新增属性存储所有子滑块实例，修改初始化事件绑定对应关系：

// 新增属性，用数组存储对应父索引的子Swiper实例
private horizontalSwiperMap: Swiper[] = [];

// 修改子Swiper初始化事件
onHorizontalSwiper(swiper: Swiper, parentIndex: number) {
  // 将子实例和父索引绑定存储
  this.horizontalSwiperMap[parentIndex] = swiper;
}

3. 父滑块切换时重置对应子滑块索引 #

修改父滑块切换事件，拿到当前激活的父索引后，取出对应子实例修改索引：

onVerticalSlideChange(swiper: Swiper) {
  // 更新当前激活的父索引
  this.currentCompanyIndex = swiper.activeIndex;
  // 取出对应子Swiper实例，存在则重置到初始索引（你配置的initialSlide是1，所以重置到1）
  const targetSwiper = this.horizontalSwiperMap[this.currentCompanyIndex];
  if (targetSwiper) {
    // slideTo参数：目标索引、过渡动画时长(ms)、是否触发切换事件
    targetSwiper.slideTo(1, 0, false);
    // 同时重置状态
    this.isReadyToDetail = false;
  }
}

注意修正原代码的错误： #

你原来的onHorizontalSlideChange中将currentCompanyIndex赋值为子滑块的activeIndex是错误的，currentCompanyIndex是父滑块的索引，应该在父滑块切换时赋值，子滑块的activeIndex只是当前水平滑块的位置，不要混淆。

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