Angular中如何正确使用Swiper 9分页组件？

我正在迁移至Swiper 9，此前已在Stack Overflow咨询过迁移相关问题，部分解答帮助我推进了进度。但现在尝试使用分页功能时遇到了问题。

我原本通过以下方式导入分页组件：

import SwiperCore, { Pagination, Swiper } from 'swiper'

// ...

@ViewChild('swiperRef', { static: true })
private _swiperRef: ElementRef | undefined
swiper?: Swiper

// ...

ngOnInit(): void {
  SwiperCore.use([Pagination])

  this.swiper = this._swiperRef.nativeElement.swiper
}

但分页并未生效。根据Swiper官方文档，正确的方式应为：

import Swiper, { Navigation, Pagination } from 'swiper';

const swiper = new Swiper('.swiper', {
  // configure Swiper to use modules
  modules: [Navigation, Pagination],
  ...
});

但我没有.swiper类的元素，也不想声明该类。此外页面中有多个Swiper实例，我希望仅针对通过_swiperRef获取的特定实例配置分页，请问是否有合适的实现方式？

解决方案 #

针对你的需求，不需要依赖类选择器，直接通过ViewChild获取的DOM元素实例化Swiper并配置分页即可，同时指定仅当前实例启用分页模块：

1. 修改导入方式：直接导入Swiper核心和Pagination模块，不再使用SwiperCore.use()全局注册（避免影响其他实例）
2. 选择正确的生命周期钩子：用ngAfterViewInit确保DOM渲染完成后再初始化，替代ngOnInit
3. 基于_ref元素初始化并配置分页

示例代码：

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import Swiper, { Pagination } from 'swiper';
// 导入必要的样式文件
import 'swiper/css';
import 'swiper/css/pagination';

@Component({
  // 你的组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild('swiperRef', { static: false })
  private _swiperRef!: ElementRef;
  swiperInstance?: Swiper;

  ngAfterViewInit(): void {
    // 直接通过_ref的原生DOM元素初始化Swiper
    this.swiperInstance = new Swiper(this._swiperRef.nativeElement, {
      // 仅给当前实例注册Pagination模块
      modules: [Pagination],
      // 启用分页并配置参数
      pagination: {
        el: '.swiper-pagination', // 对应模板中的分页容器选择器
        clickable: true, // 可选：允许点击分页按钮切换幻灯片
        // 可添加其他分页配置项，比如动态Bullets样式等
      },
      // 你的其他Swiper配置（如slidesPerView、spaceBetween等）
    });
  }
}

关键注意点： #

• 模板中需添加分页容器元素，放在swiper容器内部：

  <div #swiperRef class="your-custom-swiper-container">
    <!-- 幻灯片内容 -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <!-- 分页指示器容器 -->
    <div class="swiper-pagination"></div>
  </div>
  

• 避免使用SwiperCore.use()全局注册模块，这样只会给当前实例加载分页功能，不会干扰页面中的其他Swiper实例
• 如果之前使用的是Angular封装的Swiper组件库，建议切换到原生Swiper实例化方式，更适配Swiper 9的模块化架构

内容的提问来源于stack exchange，提问作者Raphaël Balet