[英]custom Ionic slides component {Slides} import reference only updates last created slide component
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 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. 我在html中添加了对幻灯片的引用。
MovieSliderComponent.ts MovieSliderComponent.ts
@ViewChild('Slides') slider: Slides;
I apply the reference to a variable. 我将引用应用于变量。
Home.html 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. 我将我的组件包含在我的页面html中三次。
Home.ts 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. 我尝试更改每个滑块的slidesPerView选项,但是只有最后创建的带有slide-id-2的幻灯片才被更新。
A link to my original issue @ionic-team/ionic-v3 https://github.com/ionic-team/ionic-v3/issues/990 我原始问题的链接@ ionic-team / ionic-v3 https://github.com/ionic-team/ionic-v3/issues/990
我通过在每个幻灯片实例上调用slides.resize和slides.update来解决这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.