如何在Angular 17 SSR中处理Swiper 11 Web组件事件

我让这段代码工作得很好，但我想开始使用Swiper WebComponent.如何将这段代码移植到Swiper WebComponent，特别是如何处理事件，

在这里，我已经有了glideChangeTransformtionStart、glideChangeTransformtionEnd事件. 在glideChangeTransftionEnd事件上，我需要调用一个名为setupImageZoom的方法

超文本标记语言

<div class="swiper-container-wrapper">
  <div class="swiper-container swiper">
      <div class="swiper-wrapper">
        <div *ngFor="let slide of slides" class="swiper-slide">
          <div class="swiper-zoom-container"><img style="width: 100%;" [src]="slide.image"></div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  </div>
  <div class="swiper-container thumbs-swiper thumbs-hover">
    <div class="swiper-wrapper">
      <div *ngFor="let slide of slides" class="swiper-slide">
        <div class="swiper-zoom-container"><img style="width: 100%;" [src]="slide.image"></div>
      </div>
    </div>
  </div>
</div>

TS

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

  ngAfterViewInit() {
    const thumbsSwiper = new Swiper(".thumbs-swiper", {
      loop: false,
      direction: 'vertical',
      spaceBetween: 10,
      slidesPerView: 6,
      watchSlidesProgress: true,
      centeredSlides: true,
      centeredSlidesBounds: true,
      watchOverflow: true,
      watchSlidesVisibility: true,
    });
    const mainSwiper = new Swiper('.swiper', {
      direction: 'horizontal',
      loop: false,
      speed: 400,
      spaceBetween: 100,
      mousewheel: {
        invert: true,
      },
      grabCursor: true,
      effect: 'creative',
      creativeEffect: {
        prev: {
          translate: [0, 0, -400],
        },
        next: {
          translate: ['100%', 0, 0],
        },
      },
      pagination: {
        el: '.swiper-pagination'
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      zoom: {
        maxRatio: 10,
      },
      thumbs: {
        swiper: thumbsSwiper
      } 
    });
    mainSwiper.on("slideChangeTransitionStart",  () => {
      console.log('slideChangeTransitionStart');
      thumbsSwiper.slideTo(mainSwiper.activeIndex);
    });
    mainSwiper.on("slideChangeTransitionEnd", () => {
      console.log('mainSwiper slideChangeTransitionEnd');
      thumbsSwiper.slideTo(mainSwiper.activeIndex);
      this.setupImageZoom();
    });

    thumbsSwiper.on("slideChangeTransitionEnd", () => {
      console.log('thumbsSwiper slideChangeTransitionEnd');
      mainSwiper.slideTo(thumbsSwiper.activeIndex);
    });

  this.setupImageZoom();
  }