尝试访问 ionic 2 slides 实例 - 返回未定义

Question

但是我正在尝试使用幻灯片。然后获得对实例的访问权限，以便我可以通过编程方式使用 slideto 功能。

我已按照文档进行操作，但我不断返回未定义。

下面是页面ts：

import { Component, ViewChild } from '@angular/core';

import { NavController, NavParams, Slides} from 'ionic-angular';

@Component({
  selector: 'holiday',
  templateUrl: 'holiday.html'
})
export class Holiday {


    selectedItem: any;

    @ViewChild('ghbslides') slider: Slides;
    constructor(public navCtrl: NavController, public navParams: NavParams) {

            console.log(this.slider); // returns undefined
            this.selectedItem = navParams.get('holiday');

      } 

onSlideChanged(slide) {
    console.log("slid");
}



}  

下面是我定义幻灯片的模板中的 sn-p：

<ion-slides #ghbslides (ionDidChange)="onSlideChanged(index)">

      <ion-slide>
        <h2>Slide 1</h2>
      </ion-slide>

      <ion-slide>
        <h2>Slide 2</h2>
      </ion-slide>

      <ion-slide>
        <h2>Slide 3</h2>
      </ion-slide>

    </ion-slides>

我尝试了几种不同的方法，但每次 this.slider 都是未定义的。

任何帮助将不胜感激，希望我遗漏了一些非常明显的东西。

Answer 1

发生这种情况是因为在运行构造函数时页面未加载。 幻灯片将在视图加载后定义，因此您可以覆盖 ionviewdidload 以正确处理此问题。

ionViewDidLoad() {
        console.log(this.slider);
  }