Ionic2 - Tabs znikają gdy wciskam nową stronę/Component z navCtrl

Question

Według mojego rozumienia docs jonowych i pytania typu: How to keep tab when pushing a new page?

Mam wykonane prawidłowo, co jest konieczne, aby zapobiec mój pasek karty z ukryty . Aby było jasne, pasek kart poprawnie wyświetla się po uruchomieniu nawigacji na dowolnej stronie karty i przechodzisz do dowolnej innej strony karty w stosie. Za każdym razem, gdy używasz metody "push" z kontrolera nawigacji lub kontrolera modalnego itp. Pasek kart znika. Gdzie się mylę?

W poniższym kodzie osoba wyląduje w przewodniku po pierwszym pobraniu aplikacji. Jest przycisk, który przenosi je do katalogu, w którym powinien znajdować się pasek zakładek.

W przypadku, gdy użytkownik widział już przewodnik, strona główna jest ustawiona na stronę główną, na której znajduje się pasek kart. Jeśli użytkownik przejdzie do strony katalogu ze strony głównej za pomocą paska kart, pasek kart pozostanie na miejscu, poprawnie u dołu strony.

Z mojego rozumienia dodanie tabsHideOnSubPages: false do app.module.ts uniemożliwi to zachowanie, ale tak się nie dzieje.

app.module.ts ...

imports: [ 
    IonicModule.forRoot(MyApp, { 
     tabsHideOnSubPages:false 
    }) 
] 

...

app.component.ts ...

import { Tabs } from '../pages/tabs/tabs'; 
import { Walkthrough } from '../pages/walkthrough/walkthrough'; 
@Component({ 
    templateUrl: 'app.html' 
}) 

export class MyApp { 
    rootPage: any = Tabs; 
    launchObject:any; 
    constructor(private platform: Platform){ 
    platform.ready().then(() => { 
     if(justDownloadedApp){ 
     this.rootPage = Walkthrough; 
     } 
    }) 
    } 
} 

...

app.component.html

<ion-nav [root]="rootPage"></ion-nav> 

tabs.ts

import { Component } from '@angular/core'; 
import { Home } from '../home/home'; 
import { Directory } from '../directory/directory'; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class Tabs { 
    tab1Root: any = Home; 
    tab2Root: any = Directory; 
    constructor(){} 
} 

tabs.html

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabsHideOnSubPages="false" tabTitle="Spotlight" tabIcon="flash"></ion-tab> 
    <ion-tab [root]="tab2Root" tabsHideOnSubPages="false" tabTitle="Stores" tabIcon="cart"></ion-tab> 
</ion-tabs> 

walkthrough.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Directory } from '../directory/directory'; 

@Component({ 
    selector: 'walkthrough', 
    templateUrl: 'walkthrough.html' 
}) 
export class Walkthrough { 
    constructor(public navCtrl: NavController){} 

    toDirectory(): any{ 
    this.navCtrl.push(Directory); 
    } 
} 

walkthrough.html

<ion-header class="opaque"></ion-header> 
<ion-content class="walkthroughBackground"> 
    <ion-col> 
     <ion-row> 
      <button class="clear-button-two" (click)="toDirectory()">Directory</button> 
     </ion-row> 
    <ion-col> 
</ion-content> 

Answer 1

To jest oczekiwane zachowanie. tabsHideOnSubPages:false jest domyślnym zachowaniem. Nie stanowi to problemu. Po dodaniu this.navCtrl.push(Directory); pojawia się on na szczycie komponentu WalkThrough. Directory nie ma informacji o kartach.

Tylko strona Tabs i jej dzieci będą wiedzieć o kartach. Tutaj nie pchnął Tabs do NavController. Tak więc tablica nav wygląda tak: [WalkThrough,Directory]. Zamiast tego potrzebujesz [WalkThrough, Tabs(default: Directory)].

Potrzebujesz strony z przyciskami Tab i ustaw <ion-tabs selectedIndex="1">. Możesz użyć parametru navParams, aby określić, który indeks należy wybrać. Oto mock.

solucja.ts ->this.navCtrl.push(Tabs,{index: "1"});

tabs.ts ->index = navParams.get('index')

tabs.html -><ion-tabs selectedIndex= {{index}} >

I miałaś przetestowane. Mam nadzieję, że to działa dla ciebie.