从Slider打开Ionic2 App

思想家

我正在尝试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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章