I just tried hard to show pages within ion-slides and failed - why?
import {Component, ViewChild } from '@angular/core';
import {NavController, Slides} from 'ionic-angular';
import {GeneralInfoPage} from '../general-info/general-info';
import {WaterPage} from '../water/water';
import {AboutPage} from '../about/about';
export class SlideOptions {
constructor(
public autoplay: number = 3000, // Delay between transitions (in ms). If this parameter is not passed, autoplay is disabled.
public direction: string = 'horizontal', // Swipe direction: 'horizontal' or 'vertical'.
public initialSlide: number = 0, // Index number of initial slide
public loop: boolean = true, // Whether to continuously loop from the last slide to the first slide.
public pager: boolean = true, // Show the pagination bullets.
public speed: number = 300 // Duration of transition between slides (in ms).
) {}
}
@Component({
templateUrl: 'build/pages/home/home.html',
directives: [
GeneralInfoPage,
WaterPage,
AboutPage]
})
export class HomePage {
@ViewChild('mainSlider') slider: Slides;
private slideOptions = new SlideOptions(null);
constructor(public navCtrl: NavController) {
}
}
<ion-slides #mainSlider [options]="slideOptions">
<ion-slide>
<h1>Should appear GeneralInfo</h1>
<general-info-page></general-info-page>
</ion-slide>
<ion-slide>
<h1>Should appear Water</h1>
<water-info-page></water-info-page>
</ion-slide>
</ion-slides>
and
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'general-info-page',
templateUrl: 'build/pages/general-info/general-info.html',
})
export class GeneralInfoPage {
constructor(private navCtrl: NavController) {
}
}