离子滑块导航未正确定义答案

【问题标题】：Ionic slider navigation not being properly defined离子滑块导航未正确定义
【发布时间】：2019-02-09 10:35:50
【问题描述】：

我正在尝试将一些 Ionic Slides 导航添加到我的 Ionic 项目中，我在这里找到了 Ionic 论坛帖子 https://forum.ionicframework.com/t/navigation-arrows-on-slider/119081/17，并尝试按照那里建议的说明进行操作。

但是，我收到一个错误Cannot read property of 'nextSlide' of undefined

很明显，我弄乱了我的 TS 文件中的声明，但我不知道该怎么做。论坛上的建议并没有具体说明如何将逻辑集成到 TypeScript 文件中。

【问题讨论】：

嘿 Ryan，这应该很容易解决 - 你能分享你的代码吗？特别是离子幻灯片所在的 ts 和 html 文件。
谢谢，我意识到这是我在挪用别人的代码时犯的一个简单错误。答案如下。

标签： typescript ionic-framework ionic3

【解决方案1】：

意识到我犯了一个简单的错误（很抱歉没有在上述问题中包含代码）。我在我的 TypeScript 'imageSlides' 中通过 ID 引用了我的 Ionic 滑块：

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 中的 ID：

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

简单的解决方法是将 ID 应用于 ion-slides 元素。

【讨论】：