0

私は試していて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、独自の方法で処理されますか?

スライダーから実際のアプリ (「開始」ページなど) を開始するにはどうすればよいですか?

ここに画像の説明を入力 ここに画像の説明を入力

4

1 に答える 1

2

あなたの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、スライドからそのボタンをクリックしたときにアプリを起動できるはずです。

于 2016-06-27T12:43:06.283 に答える