如何在重新選擇Ionic 2中的選項卡時重新放置選項卡中的頁堆棧

Question

我有一個帶有選項卡的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)"} 

Answer 1

您需要從 「離子棱角」 注入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. 
    } 
}