Ionic2: las pestañas desaparecen cada vez que presiono una nueva página / componente con navCtrl
Según mi comprensión de los documentos jónicos y preguntas como:¿Cómo mantener la pestaña al presionar una nueva página?
He hecho correctamente lo que es necesario para evitar que mi barra de pestañas se oculte. Para que quede claro, la barra de pestañas muestra correctamente cuándo comienza la navegación en cualquier página de pestañas y usted va a cualquier otra página de pestañas en la pila. Cada vez que utiliza un método "push" desde un controlador de navegación o un controlador modal, etc., la barra de pestañas desaparece. ¿A dónde me estoy yendo mal?
En el siguiente código, la persona aterriza en el tutorial cuando descarga la aplicación por primera vez. Hay un botón que luego los lleva al directorio donde también debería estar una barra de pestañas.
En el caso de que el usuario ya haya visto el tutorial, la página raíz se establece en la página de inicio, donde existe la barra de pestañas. Si el usuario navega a la página del directorio desde la página de inicio utilizando la barra de pestañas, la barra de pestañas permanece en su lugar, correctamente en la parte inferior de la página.
Según tengo entendido, agregar pestañasHideOnSubPages: falso a app.module.ts evitará este comportamiento, pero no lo hace.
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>