Angular Swiper 11角17 SSR Swiper断点不工作

我不能直接通过HTML属性执行断点初始化，所以为了获得断点，我通过ViewChild和ngAfterViewInit进行编程初始化.另外，为了让断点正常工作，我们不应该为幻灯片设置像素宽度，我认为这会导致代码中的问题！

TS

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

@Component({
  selector: 'app-swiper',
  standalone: true,
  imporTS: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './swiper.component.HTML',
})
export class SwiperComponent implemenTS OnInit {
  @ViewChild('swiper2') swiper2!: ElementRef<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() {
    const swiperParams = {
      breakpoinTS: {
        100: {
          slidesPerView: 3,
        },
        640: {
          slidesPerView: 5,
        },
        1024: {
          slidesPerView: 6,
        },
      },
    };

    // now we need to assign all parameters to Swiper element
    Object.assign(this.swiper2.nativeElement, swiperParams);
    this.swiper2.nativeElement.initialize();
  }

  setupImageZoom() {
    alert('setting up zoom!');
  }
}

HTML

<div>
  <swiper-container
    style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
    class="mySwiper"
    thumbs-swiper=".mySwiper2"
    space-between="10"
    navigation="true"
  >
    <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>

SCSS

/* Add application styles & imporTS to this file! */
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';

/* You can add global styles to this file, and also import other style files */
swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.mySwiper {
  height: 600px;
  width: 100%;
}

.mySwiper2 {
  // defines height and width of thumbs swiper
  height: 100px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
  swiper-slide {
    opacity: 0.6; // this set default opacity to all slides
  }
  .swiper-slide-thumb-active {
    opacity: 1; // this reset the opacity one for the active slide
  }
}

stackblitz demo