从滑块打开 Ionic2 应用程序答案

【问题标题】：Open Ionic2 App from Slider从滑块打开 Ionic2 应用程序
【发布时间】：2018-07-01 16:43:23
【问题描述】：

我正在尝试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 中不需要路由，它以自己的方式处理吗？

如何从滑块启动我的实际应用程序（可能是“开始”页面）？

【问题讨论】：

标签： angular typescript ionic2 ionic3

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

【讨论】：