时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性（读取'slideNext'）（Ionic 5）

angular - TypeError：无法读取未定义的属性（读取'slideNext'）（Ionic 5）

问题描述

我在 Ionic 5 中创建了一个应用程序，其中包含多个使用幻灯片的页面。我创建了一个服务来存储所有全局函数，并从每个页面的任何 TS 文件中调用它们。

当我尝试在页面中调用功能（正在使用）时，除了包含对幻灯片（离子幻灯片）的引用的功能外，一切都很好。

如果你有任何想法，你能帮我吗？如果您想了解有关该问题的更多详细信息，请不要犹豫。

提前致谢

服务.ts 文件

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 文件：

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)
  }
}

标签： angularionic-framework

解决方案

尝试传递对您的服务类的引用（使显示答案也将幻灯片作为输入参数），此外，我认为在您的服务中拥有 @ViewChild 是不正常的。

根据角度文档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.

就其本质而言，该服务与任何视图无关。因此，这就是为什么它是未定义的，因为它没有附属于它的视图。

推荐阅读