ionic 5幻灯片我想在屏幕旋转或屏幕更改时更改slidesPerview

import { Component, OnInit } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-slides',
  templateUrl: './slides.page.html',
  styleUrls: ['./slides.page.scss'],
})
export class SlidesPage implements OnInit {
  @ViewChild('slides', { static: false }) slides: IonSlides;

  constructor() {}

  ngOnInit() {}

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.updateSlidesPerView();
  }

  updateSlidesPerView() {
    setTimeout(() => {
      if (window.innerWidth < 600) {
        this.slides.slideOpts = { slidesPerView: 1 };
      } else {
        this.slides.slideOpts = { slidesPerView: 2 };
      }
    }, 200); // 延迟确保Swiper有足够的时间更新
  }
}

<ion-slides #slides [options]="{ slidesPerView: 1 }">
  <ion-slide>Slide 1</ion-slide>
  <ion-slide>Slide 2</ion-slide>
  <ion-slide>Slide 3</ion-slide>
  <!-- 更多幻灯片 -->
</ion-slides>