ionic2: невозможно перейти на другую страницу из всплывающего окна

Я использую Ionic2, я хочу открыть другую страницу, когда пользователь выбирает страницу для открытия из всплывающего окна, это код с первой страницы:

popvarSpecialsArr = ['Home','My Account','Cart','Wishlist','My Orders'];
presentPopoverSpecial(myEvent) {
let popover = this.popoverCtrl.create(MorePopverPage, {popvarArr: this.popvarSpecialsArr});
console.log('my event', myEvent);
popover.present({
  ev: myEvent
});

}

это код со всплывающей страницы:

popvarArr;

constructor(public navCtrl: NavController, public navParams: 
NavParams,public viewCtrl: ViewController) {
this.popvarArr = this.navParams.get('popvarArr');
console.log(this.navParams.get('popvarArr'));
}

openPage(page) {
console.log(page);
if(page == 'Home') {
  console.log('inside home');
  this.navCtrl.setRoot(HomePage);
} else if(page == 'My Account') {
  this.navCtrl.setRoot(MyAccountPage);
} else if(page == 'Cart') {
  this.navCtrl.setRoot(CartPage);
} else if(page == 'Wishlist') {
  this.navCtrl.setRoot(WishlistPage);
} else if(page == 'My Orders') {
  this.navCtrl.setRoot(MyOrdersPage);
} else if(page == 'Specials') {
  this.navCtrl.setRoot(SpecialsPage);
}
}

и это всплывающий HTML-код

<ion-content no-padding no-margin>
<ion-list no-lines no-padding no-margin>
    <button ion-item *ngFor="let popvar of popvarArr" (click)="openPage(popvar)">{{popvar}}</button>
    <!-- <button ion-item (click)="close()">Home</button>
    <button ion-item (click)="close()">My Account</button>
    <button ion-item (click)="close()">Cart</button>
    <button ion-item (click)="close()">Wishlist</button>
    <button ion-item (click)="close()">My Orders</button> -->
</ion-list>

but when I choose a page from the popover it doesn't display the page that I want and still in the same page, what should I do to display other pages from the popover


typescript angular ionic3 ionic2
person Al-shimaa Adel    schedule 22.08.2017    source источник
comment
Вы вызываете функцию openPage (page) из MorePopverPage?   -  person Rafał Gołubowicz    schedule 22.08.2017
comment
@ RafałGołubowicz да, я отредактировал сообщение и ввел html-код   -  person Al-shimaa Adel    schedule 22.08.2017
comment
@ RafałGołubowicz да, я отредактировал сообщение и ввел html-код   -  person Al-shimaa Adel    schedule 22.08.2017

Ответы (2)


arrow_upward
6
arrow_downward

Как вы можете видеть в документы:

Что, если вы хотите перемещаться из компонента наложения (всплывающее окно, модальное окно, предупреждение и т. Д.)? В этом примере мы отобразили всплывающее окно в нашем приложении. Из всплывающего окна мы получим ссылку на корень NavController в нашем приложении, используя метод getRootNav().

import { Component } from '@angular/core';
import { App, ViewController } from 'ionic-angular';

@Component({
    template: `
    <ion-content>
      <h1>My PopoverPage</h1>
      <button ion-button (click)="pushPage()">Call pushPage</button>
     </ion-content>
    `
  })
  class PopoverPage {
    constructor(
      public viewCtrl: ViewController
      public appCtrl: App
    ) {}

    pushPage() {
      this.viewCtrl.dismiss();
      this.appCtrl.getRootNav().push(SecondPage);
    }
  }

Итак, в вашем случае это будет выглядеть так:

import { App, ViewController } from 'ionic-angular';

// ...

 constructor(public viewCtrl: ViewController, public appCtrl: App) {}

// ...

openPage(page) {
    console.log(page);

    // Close the popover
    this.viewCtrl.dismiss();

    if(page == 'Home') {
        console.log('inside home');
        this.appCtrl.getRootNav().setRoot(HomePage);
    } else if(page == 'My Account') {
        this.appCtrl.getRootNav().setRoot(MyAccountPage);
    } else if(page == 'Cart') {
        this.appCtrl.getRootNav().setRoot(CartPage);
    } else if(page == 'Wishlist') {
        this.appCtrl.getRootNav().setRoot(WishlistPage);
    } else if(page == 'My Orders') {
        this.appCtrl.getRootNav().setRoot(MyOrdersPage);
    } else if(page == 'Specials') {
        this.appCtrl.getRootNav().setRoot(SpecialsPage);
    }
}
person sebaferreras    schedule 22.08.2017
comment
Рад слышать :) - person sebaferreras; 22.08.2017

arrow_upward
1
arrow_downward

(getRootNav) устарел и будет удален в следующем основном выпуске. Вместо этого используйте getRootNavById.

Вам следует использовать:

 this.appCtrl.getRootNavs()[0].setRoot('LoginPage');

который используется вместо метода getRootNavById().

person Aya Kilani    schedule 23.11.2017