2016-06-27 5 views
0

Ich versuche Ionic 2 und bin mit etwas fest. Ich habe eine Standard-Side-Menü-App von CLI erstellt und eine slider hinzugefügt. Von meiner letzten Folie, über den Button click/oder vom Anker Link möchte ich meine eigentliche Side-Menü App starten.Open Ionic2 App von Slider

Mein app.ts:

@Component({ 
    templateUrl: 'build/app.html' 
}) 
class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    rootPage: any = Slider; 

    pages: Array<{title: string, component: any}> 

    constructor(private platform: Platform) { 
    this.initializeApp(); 

    // used for an example of ngFor and navigation 
    this.pages = [ 
     { title: 'Start', component: StartPage }, 
     { title: 'Farms', component: FarmList } 
    ]; 

    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
    }); 
    } 

    openPage(page) { 
    // Reset the content nav to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.nav.setRoot(page.component); 
    } 
} 

ionicBootstrap(MyApp); 

Mein slider.ts:

@Component({ 
    templateUrl: 'build/pages/slider/slider.html' 
}) 
export class Slider { 
    mySlideOptions = { 
    initialSlide: 0, 
    loop: true, 
    pager: true 
    }; 

    @ViewChild('mySlider') slider: Slides; 

    goToSlide() { 
    this.slider.slideTo(2, 500); 
    } 
} 

Mein slider.html:

<ion-slides #mySlider [options]="mySlideOptions"> 
    <ion-slide> 
    <h1>Slide 1</h1> 
    </ion-slide> 
    <ion-slide> 
    <h1>Slide 2</h1> 
    </ion-slide> 
    <ion-slide> 
    <h1>Slide 3</h1> 
    <button>Start</button> 
    </ion-slide> 
</ion-slides> 

Wie Soweit diese Standard-App, wie von CLI erstellt, kann ich sehen, es verwendet keine Routing-Funktion von Angular2. Wird Routing in Ionic2 nicht benötigt, behandelt es auf seine eigene Weise?

Wie kann ich meine eigentliche App (d. H. 'Start' Seite vielleicht) vom Slider starten?

enter image description here enter image description here

Antwort

2

In Ihrem slider.html

<ion-slides #mySlider [options]="mySlideOptions"> 
    <ion-slide> 
    <h1>Slide 1</h1> 
    </ion-slide> 
    <ion-slide> 
    <h1>Slide 2</h1> 
    </ion-slide> 
    <ion-slide> 
    <h1>Slide 3</h1> 
    <!-- Added the click event handler --> 
    <button (click)="goToHome()">Start</button> 
    </ion-slide> 
</ion-slides> 

Und dann in Ihrem slider.ts:

// Remember to import both the NavController and your StartPage 

@Component({ 
    templateUrl: 'build/pages/slider/slider.html' 
}) 
export class Slider { 

    constructor(nav: NavController){ 
     this.nav = nav; 
    } 

    mySlideOptions = { 
    initialSlide: 0, 
    loop: true, 
    pager: true 
    }; 

    @ViewChild('mySlider') slider: Slides; 

    goToSlide() { 
    this.slider.slideTo(2, 500); 
    } 

    // Added the method to handle the click 
    goToHome(){ 
    this.nav.setRoot(StartPage); 
    } 
} 

Durch die (click="goToHome()") Ihrer Ansicht nach das Hinzufügen, und fügt hinzu, dass Verfahren in Ihrer component, du solltest sein e, um die App zu starten, wenn Sie auf diese Schaltfläche in der Folie klicken.

+0

Perfekt! Es funktionierte! Ich danke dir sehr! – Nitish