Ionic 2のタブを再選択するときにタブ内のページスタックを巻き戻す方法

Question

タブ付きのIonic-2-Appがあります。タブ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(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. 
    } 
}