从滑块打开 Ionic2 应用程序

Question

我正在尝试 Ionic 2，但遇到了一些问题。我已经从 CLI 创建了一个默认的侧边菜单应用程序并添加了一个 slider。在我上一张幻灯片中，在锚点 link 的按钮 click/or 上，我想启动我的实际侧边菜单应用程序。

我的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 中是否不需要路由，它以自己的方式处理？

如何从滑块启动我的实际应用程序（例如 'start' 页面）？

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 中添加该方法，您应该能够在从幻灯片中单击该按钮时启动该应用程序。

从滑块打开 Ionic2 应用程序

Open Ionic2 App from Slider

angular

typescript

ionic2

ionic3