自定义 Ionic 幻灯片组件 {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 的幻灯片得到更新。

A link 我原来的问题 @ionic-team/ionic-v3 https://github.com/ionic-team/ionic-v3/issues/990

Answer 1

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

自定义 Ionic 幻灯片组件 {Slides} 导入引用仅更新最后创建的幻灯片组件

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

javascript

typescript

ionic-framework

angular

ionic4