首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >自定义离子幻灯片组件{ slides }导入引用仅更新上次创建的幻灯片组件

自定义离子幻灯片组件{ slides }导入引用仅更新上次创建的幻灯片组件
EN

Stack Overflow用户
提问于 2019-03-19 22:10:28
回答 1查看 340关注 0票数 0

预期行为:当我将多个离子幻灯片组件添加到一个页面中时,我应该能够引用这些幻灯片并根据屏幕大小更新它们的属性。

当前行为:当我在一个页面上有多个离子幻灯片组件并尝试根据屏幕大小更新它们的属性时,只有最后创建的幻灯片组件才会使用新的设置进行更新。

MovieSliderComponent.html

代码语言:javascript
复制
<ion-slides #Slides class="slides" *ngIf="movies.length > 0" centeredSlides="true" loop="true" slidesPerView="3">

我在我的html中添加了对幻灯片的引用。

MovieSliderComponent.ts

代码语言:javascript
复制
@ViewChild('Slides') slider: Slides;

我将引用应用于一个变量。

Home.html

代码语言:javascript
复制
<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

代码语言:javascript
复制
@ViewChildren('Slider') Slides: MovieSliderComponent[];

我在一个变量中引用我的每张幻灯片;

代码语言:javascript
复制
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选项,但只更新了最后创建的滑块的幻灯片。

指向我最初的问题@ionic-team/ionic-v3 https://github.com/ionic-team/ionic-v3/issues/990的链接

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-03-27 08:48:53

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55242990

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档