I created an app in Ionic 5 with multiple pages in which slides are used. I created a service in order to store all the global functions and I call them from any TS file of every page.

When I tried to call the fucntions (which are in service) in pages everything is OK except for the fucntions which contains references to slides (ionic slides).

Could you please help me if you have any idea ? don't hesitate if you want more details about the issue.

Thanks in advance

service.ts file

import { Injectable, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Component } from '@angular/core';
import { NavController, NavParams, IonSlides } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class HttpService {



  @ViewChild('slides') 
  slides:IonSlides;

  slideOptions = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: false,
    pagination : {
      el: '.swiper-pagination',
      clickable: true
    },
    //allowSlidePrev:true,
    /*
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
    },*/
      slideShadows: true,
  };

  constructor(private router: Router){}

  
  async navigate(){
    this.router.navigate(['tabs/tab2'])
    await this.waitBefore(10);// Sleep thread for 10ms seconds (permet de réinitialiser radio states)
    this.router.navigate(['/quiz-maison'])
  }


  isOK:boolean=null;
  answers: any;
  hasAnswered: boolean = false;
  initState: boolean = false;
  score: number = 0;
  //allowSlidePrev=false;
  showAnswer(event:any) {
    // get data throught event emitter
      this.answers = event.target.value;
      if (this.answers=="correct"){
      //this.answers= this.bon;
      this.isOK=true;
      this.score  ;

      }

      else{
      //this.answers= this.mauv;
      this.isOK=false;false
      }
      this.hasAnswered = true;
  console.log("I'm showAnswer fct");
  console.log(this.slides);
  this.slides.slideNext();
  }

  ionSlideChange(){
  this.answers =null;
  this.isOK=null;
  this.hasAnswered = false;
  }

  
waitBefore(ms: number)
{
  return new Promise(resolve => setTimeout(resolve, ms));
}

  async goNextSlide(){
    await this.waitBefore(1000);// Sleep thread for 3 seconds
    //this.slides.lockSwipeToPrev(false);
    this.slides.slideNext();
    this.slides.lockSwipeToPrev(true);
    console.log("I'm goNextSlide fct");
  }

}

maison.ts file:

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides, NavController, NavParams } from '@ionic/angular';
import { Router } from '@angular/router';
import { HttpService } from '../../service/http.service';

@Component({
  selector: 'app-quiz-maison',
  templateUrl: './quiz-maison.page.html',
  styleUrls: ['./quiz-maison.page.scss'],
  //providers: [NavParams]
})
export class QuizMaisonPage implements OnInit {

  @ViewChild('slides') slides: IonSlides;
    slideOptions = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: false,
    pagination : {
      el: '.swiper-pagination',
      clickable: true
    },
    //allowSlidePrev:true,
    /*
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
    },*/
      slideShadows: true,
  };
  
  constructor(private http:HttpService){}

  ngOnInit() {
  }


  showAnswer(){
  this.http.showAnswer(event)
  }

  goNextSlide(){
    this.http.goNextSlide();
    }

    goToAnswers(){
      this.http.goToAnswers();
    }

  ionSlideChange(){
    this.http.ionSlideChange()

  }

  waitBefore(){
    let ms: number;
    this.http.waitBefore(ms)
  }
}

CodePudding user response：

Try passing a reference to your service class (make show answers also take the slides as an input parameter) , also, I think it is not normal to have a @ViewChild inside of your service.

Per the angular docs Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.

The service, by its very nature, is not tied to any view. Thus that is why it is undefined since it has no view that it is attached to.

CodePudding user response：

make sure you have <ion-slides #slides> on your html file since thats the name you gave the variable in your maison.ts

  <ion-slides pager="true" style="height: 100%;" #questionario (ionSlideWillChange)="slideChanged()"> 

 @ViewChild('questionario') slides: IonSlides;