SlideChange(Swiper) 事件在 Angular 中不起作用

Question

我有以下情况：我正在尝试使用Swiper库将图片更改为轮播。

我正在使用 Angular 16（我很快就会升级到 v18）和最新版本的 Swiper，当选择列表中的下一张图片时，我没有收到 Slidechange 事件。

我想在更改轮播中的图像后更改表中的数据，所以我需要这个事件。

Template:
<swiper-container [slidesPerView]="1" [centeredSlides]="true" [navigation]="true" [pagination]="{ clickable: true }" (slidechange)="onSlideChange($event)">
    <swiper-slide *ngIf="topIssue.DescriptionPhoto.Base64StringData.length> 0"> 
    <img [src]="topIssue.DescriptionPhoto.Base64StringData" /></swiper-slide>
    <swiper-slide *ngIf="topIssue.FurtherActionPhoto.Base64StringData.length> 0"> 
    <img [src]="topIssue.FurtherActionPhoto.Base64StringData" /></swiper-slide>
</swiper-container>

Component:
  onSlideChange(swiper: any) {
    console.log(swiper);
  }

AppModule:
import { register } from 'swiper/element/bundle';


export class AppModule {
  constructor() {
    registerLocaleData(localeDe);
    register();
  }
}

Answer 1

如果你想从 TS 中执行监听器操作，我们可以使用

addEventListener

，名称为

swiperslidechange

，我使用

AbortController

来删除监听器。

export class App {
  abort: AbortController = new AbortController();
  ...

  ...

  ngAfterViewInit() {
    this.swiper.nativeElement.addEventListener(
      'swiperslidechange',
      (event: any) => {
        const [swiper, progress] = event.detail;
        console.log('from TS:', event);
      }, {
        signal: this.abort.signal,
      }
    );
  }
  ...

  ...
  ngOnDestroy() {
    this.abort.abort();
  }
}

如果你想监听 DOM 事件，你可以通过 Angular 事件绑定来监听

swiperslidechange

HTML 事件。

<swiper-container init="false" #swiper (swiperslidechange)="swiperslidechange($event)">
  @for (projectImagePath of projectImagesPath; track projectImagePath) {
    <swiper-slide>
      <img [src]="projectImagePath" alt=""/>
    </swiper-slide>
  }
</swiper-container>

TS：

swiperslidechange(data: any) {
  console.log('from DOM', data);
}

完整代码：

import {
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ElementRef,
  ViewChild,
} from '@angular/core';
import { MatGridListModule } from '@angular/material/grid-list';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatGridListModule],
  template: `
    <swiper-container init="false" #swiper (swiperslidechange)="swiperslidechange($event)">
      @for (projectImagePath of projectImagesPath; track projectImagePath) {
        <swiper-slide>
          <img [src]="projectImagePath" alt=""/>
        </swiper-slide>
      }
    </swiper-container>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class App {
  abort: AbortController = new AbortController();
  @ViewChild('swiper') swiper!: ElementRef<any>;
  projectImagesPath = [
    'https://placehold.co/600x400?1',
    'https://placehold.co/600x400?2',
    'https://placehold.co/600x400?3',
    'https://placehold.co/600x400?4',
  ];

  swiperslidechange(data: any) {
    console.log('from DOM', data);
  }

  ngAfterViewInit() {
    // swiper parameters
    const swiperParams = {
      slidesPerView: 1,
      navigation: true,
      loop: true,
      pagination: { clickable: true },
    };
    Object.assign(this.swiper.nativeElement, swiperParams);
    this.swiper.nativeElement.initialize();

    this.swiper.nativeElement.addEventListener(
      'swiperslidechange',
      (event: any) => {
        const [swiper, progress] = event.detail;
        console.log('from TS:', event);
      },
      {
        signal: this.abort.signal,
      }
    );
  }

  ngOnDestroy() {
    this.abort.abort();
  }
}

Stackblitz 演示