![](/img/trans.png)
[英]scrolling in ionic2 is disabled when I navigate from a popover to a page
[英]ionic2: can't navigate to another page from popover
我正在使用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>
但是當我從彈出菜單中選擇一個頁面時,它沒有顯示我想要的頁面,並且仍在同一頁面中,我該怎么做才能從彈出窗口中顯示其他頁面
就像您可以在docs中看到的那樣:
如果要從覆蓋組件(彈出窗口,模式窗口,警報窗口等)導航怎么辦? 在此示例中,我們在應用程序中顯示了一個彈出窗口。 從彈出窗口中,我們將使用
getRootNav()
方法獲取應用程序中根NavController
的引用。
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);
}
}
(getRootNav)已過時,並將在下一個主要版本中刪除。 請改用getRootNavById。
您應該使用:
this.appCtrl.getRootNavs()[0].setRoot('LoginPage');
而不是getRootNavById()
方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.