Откройте приложение Ionic2 из слайдера

Я пробую Ionic 2 и что-то застрял. Я создал приложение бокового меню по умолчанию из CLI и добавил файл slider. С моего последнего слайда при нажатии кнопки/или по якорной ссылке я хотел бы запустить свое фактическое приложение бокового меню.

Мое приложение.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);
  }
}

Мой слайдер.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 роутинг не нужен, он по-своему обрабатывает?

Как я могу запустить свое фактическое приложение (например, «стартовую» страницу) со слайдера?

введите здесь описание изображения введите здесь описание изображения


typescript angular ionic3 ionic2
person Thinker    schedule 27.06.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В вашем 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, вы сможете запускать приложение при нажатии этой кнопки на слайде.

person sebaferreras    schedule 27.06.2016