從Slider中打開Ionic2應用程序

Question

我正在嘗試Ionic 2，並且遇到了一些問題。我從CLI創建了一個默認的側邊菜單應用程序，並添加了一個slider。從我上一張幻燈片中，點擊按鈕/或從錨鏈接，我想開始我的實際的側邊菜單應用程序。

我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); 

我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); 
    } 
} 

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

由於就像從CLI創建的這個默認應用程序一樣，它不使用路徑功能Angular2。在Ionic2中不需要路由，它以它自己的方式處理？

如何從滑塊開始我的實際應用（即'開始'頁面）？

Answer 1

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

，然後在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); 
    } 
} 

通過添加視圖中的(click="goToHome()")，並增加該方法在component，你應該是abl e點擊幻燈片中的按鈕啓動應用程序。