Angular 17 SSR切换路由后Swiper 11.0.6失效问题求助

问题根源 #

路由切换时Angular会销毁当前组件实例，返回原路由时组件重新创建，但Swiper实例未被正确清理，加上SSR环境下非浏览器场景初始化的限制，导致DOM元素状态异常、Swiper无法正常初始化。

解决方案 #

1. 组件销毁时强制清理Swiper实例 #

添加OnDestroy钩子销毁Swiper实例，避免内存泄漏和重复初始化冲突：

修改SwiperThumbsVerticalDup1Component.ts：

import { CommonModule } from '@angular/common';
import {
  Component,
  OnInit,
  CUSTOM_ELEMENTS_SCHEMA,
  ViewChild,
  ElementRef,
  AfterViewInit,
  OnDestroy,
} from '@angular/core';

@Component({
  selector: 'app-swiper-thumbs-vertical-dup-1',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './swiper-thumbs-vertical-dup-1.component.html',
  styleUrl: './swiper-thumbs-vertical-dup-1.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SwiperThumbsVerticalDup1Component implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('swiper2') swiper2!: ElementRef<any>;
  private mainSwiper?: any;
  private thumbSwiper?: any;

  slides = [
    { image: 'https://swiperjs.com/demos/images/nature-1.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-2.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-3.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-4.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-5.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-6.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-7.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-8.jpg' },
    { image: 'https://swiperjs.com/demos/images/nature-10.jpg' },
  ];

  constructor() {}

  ngOnInit() {}

  ngAfterViewInit() {
    // 仅在浏览器环境初始化（适配SSR）
    if (typeof window !== 'undefined') {
      this.initSwipers();
    }
  }

  private initSwipers() {
    const mainSwiperEl = document.querySelector('.mySwiper') as any;
    
    // 初始化缩略图swiper
    const thumbParams = {
      breakpoints: {
        100: { slidesPerView: 3 },
        640: { slidesPerView: 5 },
        1024: { slidesPerView: 6 },
      },
    };
    Object.assign(this.swiper2.nativeElement, thumbParams);
    this.thumbSwiper = this.swiper2.nativeElement.initialize();

    // 初始化主swiper并关联缩略图
    const mainParams = {
      spaceBetween: 10,
      navigation: true,
      thumbs: { swiper: this.thumbSwiper }
    };
    Object.assign(mainSwiperEl, mainParams);
    this.mainSwiper = mainSwiperEl.initialize();
  }

  ngOnDestroy() {
    // 完全销毁实例并清除DOM关联
    this.mainSwiper?.destroy(true, true);
    this.thumbSwiper?.destroy(true, true);
  }
}

2. 修改模板，统一控制初始化时机 #

移除模板中主swiper的thumbs-swiper属性，添加init="false"手动控制初始化：

<div>
  <swiper-container style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="mySwiper"
      space-between="10" navigation="true" init="false">
      <swiper-slide *ngFor="let slide of slides">
          <img [src]="slide.image" />
      </swiper-slide>
  </swiper-container>

  <swiper-container #swiper2 class="mySwiper2" space-between="10" slides-per-view="6" free-mode="true"
      watch-slides-progress="true" init="false">
      <swiper-slide *ngFor="let slide of slides">
          <img [src]="slide.image" />
      </swiper-slide>
  </swiper-container>
</div>

3. 路由切换后确保DOM完全渲染 #

若仍存在初始化时机问题，可结合路由事件和变更检测，确保组件完全渲染后再初始化：

// 在组件构造函数中添加
import { Router, NavigationEnd } from '@angular/router';
import { ChangeDetectorRef } from '@angular/core';

constructor(private router: Router, private cdr: ChangeDetectorRef) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      this.cdr.detectChanges();
      if (typeof window !== 'undefined') {
        setTimeout(() => this.initSwipers(), 0);
      }
    }
  });
}

关键注意事项 #

• SSR适配：必须在浏览器环境下初始化Swiper，避免SSR阶段因无DOM导致报错。
• 实例清理：组件销毁时必须销毁Swiper实例，否则会引发内存泄漏和后续初始化冲突。
• 初始化顺序：先初始化缩略图swiper，再关联到主swiper，避免异步关联失败。

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