html - SlideChange(Swiper)-händelsen fungerar inte

Jag har följande situation: Jag försöker använda Swiper-biblioteket för att byta bilder som ett karusell.

Jag använder Angular 16 (jag kommer snart att uppgradera till v18) och den senaste versionen av Swiper. När jag väljer nästa bild i listan får jag inte slidechange-händelsen.

Jag ville ändra data i tabellen efter att ha ändrat bilden i karusellen, så jag behövde den här händelsen.

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();
  }
}

Svar #1

Om du vill utföra lyssnaråtgärden från TS kan vi använda addEventListener, med namnet som swiperslidechange, jag använder AbortController för att ta bort lyssnaren.

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();
  }
}

Om du vill lyssna på DOM-händelser kan du lyssna på swiperslidechange HTML-händelsen med Angular-händelsebindning.

<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);
}

Fullständig kod:

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-demonstration