Ионная навигация по слайдеру не определена должным образом - PullRequest
0 голосов
/ 04 сентября 2018

Я пытаюсь добавить навигацию Ionic Slides в свой Ionic проект, и я нашел ветку Ionic Forum здесь https://forum.ionicframework.com/t/navigation-arrows-on-slider/119081/17, и я попытался следовать указаниям, предложенным там.

Однако я получаю сообщение об ошибке Cannot read property of 'nextSlide' of undefined

Очевидно, я испортил объявление в моем файле TS, но я не уверен, как. Предложения на форуме не были конкретными о том, как интегрировать логику в файл TypeScript.

1 Ответ

0 голосов
/ 05 сентября 2018

Понял, что допустил простую ошибку (извиняюсь за то, что не включил код в вопрос выше). Я сослался на мой слайдер Ionic с помощью идентификатора в «TypeSlides» TypeScript:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';

@IonicPage()
@Component({
    selector: 'page-details',
    templateUrl: 'details.html',
})
export class DetailsPage {
    category: any;
    data: any = {};
    @ViewChild('imageSlides') slides: Slides;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams
    ) { }

    ionViewDidLoad() {
        this.data = this.navParams.get('data');
        this.category = (this.navParams.get('category'));
    }

    goBack(){
        this.navCtrl.pop();
    }

    nextSlide() {
        this.slides.slideNext();
    }

    prevSlide() {
        this.slides.slidePrev();
    }
}

Но тогда не дал моему слайдеру идентификатор в моем HTML:

            <ion-slides pager>
                <ion-slide *ngIf="data.video">
                    <video controls poster="../../assets/imgs/{{category | slug}}/{{data.video}}-poster.jpg">
                        <source src="../../assets/imgs/{{category | slug}}/{{data.video}}.mp4" type="video/mp4">
                    </video>
                </ion-slide>
                <ion-slide *ngFor="let image of data.featured_image">
                    <img src="../../assets/imgs/{{category | slug}}/{{image}}.jpg" class="featured-image"/>
                </ion-slide>
            </ion-slides>
            <button type="submit" float-left ion-button color="primary" class="btnPrev" (click)="prevSlide()">Prev</button>
            <button type="submit" float-right ion-button color="primary" class="btnNext" (click)="nextSlide()">Next</button>

Простым решением было применение идентификатора к элементу ионных слайдов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...