我正在尝试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);
}
}
我的slide.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
,它以自己的方式处理吗?
如何从滑块启动我的实际应用程序(例如,“开始”页面)?
在你的 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
在幻灯片中单击该按钮时,您应该能够启动该应用程序。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句