Пользовательский компонент Ionic Slides {Slides}, ссылка на импорт только обновляет последний созданный компонент Slides

Question

Ожидаемое поведение. Когда я добавляю на страницу несколько компонентов ионных слайдов, я должен иметь возможность ссылаться на эти слайды и обновлять их свойства в зависимости от размера экрана.

Текущее поведение: когда у меня на странице несколько компонентов ионных слайдов, и я пытаюсь обновить их свойства в зависимости от размера экрана, только последний созданный компонент слайда фактически обновляется с новыми настройками.

MovieSliderComponent.html

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

Я добавляю ссылку на слайды в мой HTML.

MovieSliderComponent.ts

@ViewChild('Slides') slider: Slides;

Я применяю ссылку на переменную.

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">

Я включаю свой компонент в HTML-страницу три раза.

Home.ts

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

Я ссылаюсь на каждый из моих слайдов в переменной;

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();
}

Я пытаюсь изменить каждый параметр слайдера slidesPerView, но обновляется только слайд с slide-id-2, который является последним созданным слайдером.

Ссылка на мой оригинальный номер @ ionic-team / ionic-v3 https://github.com/ionic-team/ionic-v3/issues/990

Answer 1

Я решил это, вызывая slides.resize и slides.update для каждого экземпляра слайдов.