I'm using Ionic2, I want to open another page when user choose a page to open from popover, this the code from the first page:
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
});
}
this the code from popover page:
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);
}
}
and this is the popover Html code
<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
Just like you can see in the docs :
What if you wanted to navigate from an overlay component (popover, modal, alert, etc)? In this example, we've displayed a popover in our app. From the popover, we'll get a reference of the root
NavController
in our app, using thegetRootNav()
method.
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);
}
}
So in your case, it'd look like this:
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);
}
}
(getRootNav) is deprecated and will be removed in the next major release. Use getRootNavById instead.
You should use:
this.appCtrl.getRootNavs()[0].setRoot('LoginPage');
which is instead of getRootNavById()
method.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.