Hello, my ViewChilds slides are not working and I do not know the reason:
component.cs
@ViewChild('slidePregacoes') slidePregacoes: Slides;
@ViewChild('slideEventos') slideEventos: Slides;
proximo() {
this.slidePregacoes.slideNext();
}
page.html
<ion-slides [options]="slideOptsEventos" #slideEventos>
<ion-slides [options]="slideOptsPregacoes" #slidePregacoes>
Anyone have any idea why it did not work?
When is proximo()
being called? If the answer is not âdefinitively after the view has been completely builtâ, thatâs your problem.
It is being called on a button after loading the entire page.
<ion-button size="small" color="tertiary" (click)="proximo()">
It works when I only have a Slider with the following code:
@ViewChild(Slides) slideEventos: Slides;
If I put more than one âslidesâ and refer to it as @ViewChild (âslidePregacoesâ) it stops working.
Tricky one, first I think with v4, I mean you are trying with Ionic v4 right (?), you need to access them thru the nativeElement
of ElementRef
@ViewChild('slideEventos') slideEventos: ElementRef;
this.slideEventos.nativeElement.slideNext();
Then, another tricky one, itâs depending of your configuration, slideNext
might not work/be allowed, thatâs the definition of the Swiper (not Ionic). If it still doesnât work, could you plz show your options
values?
1 Like
Your suggestion solved. Thank you!
Now another error continues when page mute:
Uncaught TypeError: Can not read property 'removeEventListener' of undefined
Do you have any idea what that is? I know itâs also attached to the slides.
Update to beta.2 might help maybe?
Yesterday @brandyshea answered a question on the Ionic repo and mentioned that itâs better to access to Slides not with the native element but like following for example
@ViewChild('mySlider', { read: Slides }) slides: Slides;
this.slides.getActiveIndex();
Itâs cleaner. Unfortunately it didnât work that well and I gonna stick to native element, but maybe for you it could workout
Reference: https://github.com/ionic-team/ionic/issues/15046#issuecomment-412128537
I did the test and in my case it did not work either. Only with ElementRef that worked well. But, the âremoveEventListenerâ error remains.
Is the swiper you suggested to upgrade to beta.2?
In any case I would definitely suggest to update to beta.2 if you didnât did yet, itâs better I think for the swiper and scroll
I think you are facing https://github.com/ionic-team/ionic/issues/14822 which is solved now
1 Like
All settled now. I changed the ElementRef as suggested and changed the nesting of my pages. Now everything running without errors. Thank you so much!
1 Like
Just for the record, in Ionic v4 today, the correct way to to this is:
import {
IonSlides,
} from '@ionic/angular';
...
@ViewChild('slides', { read: IonSlides }) slides: IonSlides;
...
// moving to some slide index, just an example
this.slides.slideTo(3, 0);
2 Likes