Angular Swiper宽度在调整大小时保持增长

import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [SwiperModule],
})
export class AppModule {}

// 在组件中
import SwiperCore, { ResponsiveBreakpoints } from 'swiper/core';

SwiperCore.use([ResponsiveBreakpoints]);

export class MyComponent {
  swiperConfig = {
    // ...其他配置
    breakpoints: {
      // 当屏幕宽度小于等于640px时
      640: {
        slidesPerView: 1,
        spaceBetween: 10,
      },
      // 当屏幕宽度大于640px时
      768: {
        slidesPerView: 2,
        spaceBetween: 20,
      },
      // 更多断点...
    },
  };
}

import { Component, OnInit, OnDestroy } from '@angular/core';
import SwiperCore, { Navigation, Pagination } from 'swiper/core';

SwiperCore.use([Navigation, Pagination]);

@Component({
  selector: 'app-my-swiper',
  templateUrl: './my-swiper.component.html',
  styleUrls: ['./my-swiper.component.css']
})
export class MySwiperComponent implements OnInit, OnDestroy {
  private resizeObserver: ResizeObserver;

  ngOnInit() {
    this.resizeObserver = new ResizeObserver(() => {
      if (this.swiper) {
        this.swiper.update();
      }
    });
    this.resizeObserver.observe(this.swiperContainer.nativeElement);
  }

  ngOnDestroy() {
    this.resizeObserver.disconnect();
  }
}

<div #swiperContainer class="swiper-container">
  <!-- Swiper 内容 -->
</div>