Как перемотать стек страниц на вкладке при повторном выборе вкладки в Ionic 2

У меня есть Ionic-2-Приложение с вкладками. На вкладке 1 можно перейти к подстраницам. Теперь, когда я выбираю другую вкладку, а затем повторно выбираю первую вкладку, Я хотел бы перемотать страницы внутри этой вкладки, чтобы снова увидеть корневую страницу первой вкладки.

На вкладке-компоненте, на моей первой вкладке, я могу добавить (ionSelect)вызов метода внутри вкладки.ts.

табуляция.формат 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>

табуляция.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 без нарушения навигации внутри этой вкладки?

Обновить

табуляция.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 ответ

  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.
      }
    }