Откройте приложение Ionic2 от Slider

Question

Откройте приложение Ionic2 от Slider

0

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

Мои приложения:

@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 маршрутизации Angular2. Маршрутизация не нужна в Ionic2, она обрабатывает ее по-своему?

Как я могу запустить свое приложение (например, "начать") с ползунка?

Nitish 27 июнь 2016, в 11:31

Источник

Теги:

angular

typescript

ionic3

ionic2

1 ответ

Ещё вопросы

sebaferreras · Accepted Answer · 2016-06-27T11-27-00.000Z

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

Отлично! Это сработало! Спасибо вам большое!