Angular中如何获取Swiper滑块的当前活动索引？

安全阿岳

2026-7-1

在Angular中获取Swiper当前活动滑块索引的实现方法

现有代码的问题

模板引用变量不匹配：HTML里是#swiper，但TS中@ViewChild写的是'swipper'（拼写错误）
事件绑定与方法名不匹配：HTML绑定的是slideChange($event)，但TS里的方法是onSlideChange
未指定Swiper组件类型，使用any不利于类型提示

正确实现步骤

1. 确保安装Swiper Angular包

如果还没安装，执行：

npm install swiper @types/swiper

2. 修改HTML模板

修正事件绑定和模板引用，确保结构完整：

<swiper-container #swiper slides-per-view="1" pagination="true" pagination-clickable="true"
  (slideChange)="onSlideChange($event)">
  <swiper-slide *ngFor="let img of images">
    <img mat-card-image [src]="img" alt="Image">
  </swiper-slide>
</swiper-container>

3. 修正TypeScript代码

导入SwiperComponent并修正模板引用、方法名，同时提供两种获取索引的方式：

import { Component, ViewChild } from '@angular/core';
import { SwiperComponent } from 'swiper/angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 匹配HTML中的#swiper，指定SwiperComponent类型
  @ViewChild('swiper') swiperRef?: SwiperComponent;
  images = ['assets/images/image_1.png', 'assets/images/image_2.png', 'assets/images/image_3.png'];

  onSlideChange(event: any) {
    // 方式1：直接通过事件对象获取当前索引
    console.log('当前活动滑块索引:', event.activeIndex);

    // 方式2：通过ViewChild获取Swiper实例后读取索引
    if (this.swiperRef?.swiperRef) {
      console.log('当前活动滑块索引（ViewChild方式）:', this.swiperRef.swiperRef.activeIndex);
    }
  }
}