Angular 18中Swiper.js自定义分页在*ngIf切换时消失问题

问题根源 #

当通过*ngIf切换内容时，Angular会销毁并重建dashboard-carousel组件。你之前使用类选择器.swiper-pagination绑定分页元素，这种全局选择器可能在组件重建时匹配到错误的元素（比如已销毁组件的残留元素），或者Swiper初始化时无法找到当前组件实例对应的分页元素。而默认的pagination: true会自动创建内部分页元素，避免了这个问题。

解决方案 #

1. 用模板引用变量替代类选择器绑定分页元素 #

修改dashboard-carousel组件的HTML，给分页元素添加模板引用，确保每个组件实例绑定自己的分页元素：

<div>
  <swiper-container
    #swiperRef
    swiperDirective
    [config]="config"
    (swiperslidechange)="slideChange($event)"
    init="false"
  >
    <swiper-slide *ngFor="let slide of slides">
      <slide>
        <!-- 你的slide内容 -->
      </slide>
    </swiper-slide>
  </swiper-container>

  <!-- 添加模板引用变量 #paginationEl -->
  <div #paginationEl class="swiper-pagination"></div>
</div>

2. 调整组件逻辑，动态绑定分页元素并控制Swiper初始化 #

修改dashboard-carousel组件的TS代码，获取分页元素的引用，并在视图初始化时将其绑定到Swiper配置，同时添加销毁逻辑避免内存泄漏：

import { Component, Input, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { SwiperOptions, SwiperContainer } from 'swiper';

@Component({
  selector: 'dashboard-carousel',
  templateUrl: './dashboard-carousel.component.html'
})
export class DashboardCarouselComponent implements AfterViewInit, OnDestroy {
  @ViewChild('swiperRef') swiperRef!: ElementRef<SwiperContainer>;
  @ViewChild('paginationEl') paginationEl!: ElementRef<HTMLElement>;
  @Input() slides: any[];
  public config: SwiperOptions;

  ngOnInit(): void {
    this.config = {
      spaceBetween: 17,
      slidesPerView: 1,
      loop: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        type: 'bullets',
      },
    };
  }

  ngAfterViewInit(): void {
    // 将当前组件的分页元素绑定到Swiper配置
    this.config.pagination.el = this.paginationEl.nativeElement;
    // 初始化Swiper
    this.initSwiper();
  }

  ngOnDestroy(): void {
    // 销毁Swiper实例，避免内存泄漏
    this.swiperRef?.nativeElement.destroy();
  }

  private initSwiper(): void {
    Object.assign(this.swiperRef.nativeElement, this.config);
    this.swiperRef.nativeElement.initialize();
  }

  slideChange(event: any): void {
    // 你的slide切换逻辑
  }
}

3. 更新Swiper指令，支持配置变更时重新初始化 #

修改指令代码，监听配置变化，确保组件重建或配置更新时能重新初始化Swiper：

import { Directive, Input, ElementRef, AfterViewInit, OnChanges, SimpleChanges } from '@angular/core';
import { SwiperOptions, SwiperContainer } from 'swiper';

@Directive({
  selector: '[swiperDirective]',
})
export class SwiperDirective implements AfterViewInit, OnChanges {
  @Input() config?: SwiperOptions;

  constructor(private el: ElementRef<SwiperContainer>) {}

  ngAfterViewInit(): void {
    this.initSwiper();
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 当配置变化且不是首次初始化时，重新初始化Swiper
    if (changes['config'] && !changes['config'].firstChange) {
      this.initSwiper();
    }
  }

  private initSwiper(): void {
    if (this.config && this.el.nativeElement) {
      Object.assign(this.el.nativeElement, this.config);
      this.el.nativeElement.initialize();
    }
  }
}

4. 可选：简化父组件结构（非必须） #

如果不需要保留两个独立的容器结构，可以用ng-container结合条件类替代*ngIf，避免组件频繁销毁重建：

<div 
  class="tw-gap-8"
  [class.tw-grid-cols-dashboard]="isMediumPlus"
  [class.tw-grid-cols-1]="!isMediumPlus"
>
  <div class="tw-flex tw-flex-col tw-gap-8" *ngIf="isMediumPlus">
    <!-- 其他内容 -->
  </div>
  <ng-container *ngTemplateOutlet="carouselTemplate"></ng-container>
</div>

<ng-template #carouselTemplate>
  <dashboard-carousel [slides]="slides"></dashboard-carousel>
</ng-template>

这样dashboard-carousel组件只会初始化一次，切换时仅改变布局类，进一步避免分页问题。

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