custom Ionic slides component {Slides} import reference only updates last created slide component

Question

Expected behavior: When I add multiple ionic slides components into a page I should be able to reference those slides and update their properties based on screen size.

Current behavior: When I have multiple ionic slides components on a page and attempt to update their properties based on screen size only the slide component that was created last actually updates with new settings.

MovieSliderComponent.html

<ion-slides #Slides class="slides" *ngIf="movies.length > 0" centeredSlides="true" loop="true" slidesPerView="3">

I add a reference to slides in my html.

MovieSliderComponent.ts

@ViewChild('Slides') slider: Slides;

I apply the reference to a variable.

Home.html

<movie-slider #Slider id="nowPlaying" *ngIf="mdata.inTheatres.length > 0" [movies]="mdata.inTheatres">

<movie-slider #Slider id="nowPlayingNearYou" *ngIf="mdata.nearbyShowings.length > 0" [movies]="mdata.nearbyShowings">

<movie-slider #Slider id="genreSuggestions" *ngIf="mdata.suggestedByGenre.length > 0" [movies]="mdata.suggestedByGenre" [showGenres]="true">

I include my component in my page html three times.

Home.ts

@ViewChildren('Slider') Slides: MovieSliderComponent[];

I reference each of my slides in a variable;

setSlidesPerView() {

 if(this.platform.width() >= 1200) {
   this.Slides.forEach((slider) => slider.slider.slidesPerView = 5);
   console.log(this.platform.width());
 }

 else if(this.platform.width() >= 319 && this.platform.width() < 1200) {
   this.Slides.forEach((slider) => slider.slider.slidesPerView = 3);
 }

 else if(this.platform.width() < 319) {
   this.Slides.forEach((slider) => slider.slider.slidesPerView = 1);
 }

 this.cd.detectChanges();
}

I attempt to change each of my sliders slidesPerView option but only the slide with slide-id-2 which is the slider last created gets updated.

A link to my original issue @ionic-team/ionic-v3 https://github.com/ionic-team/ionic-v3/issues/990

Answer 1

我通过在每个幻灯片实例上调用slides.resize和slides.update来解决这个问题。