在Ionic 2中重新选择选项卡时如何在选项卡中回滚页堆栈
在Ionic 2中重新选择选项卡时如何在选项卡中回滚页堆栈
提问于 2016-09-30 15:13:20
我有一个带标签的Ionic-2应用程序。在表1中，可以导航到子页面。现在，当我选择另一个选项卡，然后重新选择第一个选项卡时，我希望将该选项卡中的页面倒带，以再次查看第一个选项卡的根页。
在选项卡组件上，在我的第一个选项卡上，我可以添加(ionSelect)来调用tab.ts中的方法。
tab.html:
<ion-tabs>
<ion-tab [root]="tab1Root"
(ionSelect)="rewind()"
tabIcon="icon1"></ion-tab>
<ion-tab [root]="tab2Root"
tabIcon="icon2"></ion-tab>
<ion-tab [root]="tab3Root"
tabIcon="icon3"></ion-tab>
</ion-tabs>tab.ts:
// [...]
export class Tabs {
tab1Root:any = MyFirstRootPage;
tab2Root:any = MySecondRootPage;
tab3Root:any = MyThirdRootPage;
constructor( private nav:NavController ) {}
rewind():void {
// How can I rewind the pages in tab 1 here?
// Probably, I should do something like "nav.pop()",
// but how?
console.log( 'Tab 1 selected' );
}
}如何在不中断此选项卡内的导航的情况下，将页倒转到选项卡1中？
更新
tab.ts：
import { Page, NavController, App } from 'ionic-angular';
import { HousiPage } from '../housi-page/housi-page';
import { DocalizrPage } from "../docalizr/docalizr";
import { InfectionListPage } from '../infection-list/infection-list';
import { StandardListPage } from '../standard-list/standard-list';
@Page( {
templateUrl: 'build/pages/tabs/tabs.html'
} )
export class TabsPage {
// Die Präventions- und die More-Seite sind beides
// StandardListPages, aber mit unterschiedlichen
// Parametern
preventionPageParams:any = {
slug: 'prevention',
hasThumbnails: true,
pages: []
};
morePageParams:any = {
slug: 'more',
hasThumbnails: false,
pages: []
};
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root:any = DocalizrPage;
tab2Root:any = HousiPage;
tab3Root:any = InfectionListPage;
tab4Root:any = StandardListPage;
tab5Root:any = StandardListPage;
constructor( private nav:NavController, public app:App ) {}
rewind():void {
this.app.getActiveNav().setRoot( DocalizrPage );
}
}但这给了我一个错误：
Subscriber.js:229 Uncaught
ViewWrappedException {_wrapperMessage: "Error in build/pages/tabs/tabs.html:2:4", _originalException: TypeError: this.app.getActiveNav(...).setRoot is not a function at TabsPage.rewind (http://local…, _originalStack: "TypeError: this.app.getActiveNav(...).setRoot is n…//localhost:8100/build/js/app.bundle.js:94488:18)", _context: DebugContext, _wrapperStack: "Error: Error in build/pages/tabs/tabs.html:2:4↵ …//localhost:8100/build/js/app.bundle.js:94496:30)"}回答 1
Stack Overflow用户
发布于 2017-02-12 09:49:57
你需要从“离子角”注入app: App，
然后调用this.app.getActiveNav().setRoot(RecipesPage);
在您的代码this.app.getActiveNav().setRoot(MyFirstRootPage);中
请看下面的示例：
import { Component } from '@angular/core';
import {ShoppingListPage} from "../shopping-list/shopping-list";
import {RecipesPage} from "../recipes/recipes";
import {App} from "ionic-angular";
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
shoppingList: any = ShoppingListPage;
recipes: any = RecipesPage;
constructor(public app: App) {
}
rewind() {
console.log('Clicked Recipe Tab');
this.app.getActiveNav().setRoot(RecipesPage);
//const root = this.app.getRootNav (); // in this line, you have to declare a root, which is the app's root
//root.popToRoot (); // here you go to the root.
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39794778
复制相关文章
相似问题
腾讯云开发者
