angular - example - ionic 4 tabs routing

Ionic2: las pestañas desaparecen cada vez que presiono una nueva página/componente con NavCtrl

Question

Según mi comprensión de los documentos de Ionic 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 se oculte mi barra de pestañas. Para que quede claro, la barra de pestañas se muestra correctamente cuando se inicia la navegación en cualquier página de pestañas y se accede a cualquier otra pestaña de la pila. Cada vez que utiliza un método de "inserción" desde un controlador de navegación o controlador modal, etc., la barra de pestañas desaparece. ¿Dónde estoy equivocado?

En el siguiente código, la persona aterriza en el tutorial cuando descarga la aplicación por primera vez. Hay un botón que los lleva al directorio donde también debería estar la barra de pestañas.

En el caso en que el usuario ya haya visto el tutorial, la página raíz está configurada 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 usando la barra de pestañas, la barra de pestañas permanece en su lugar, correctamente en la parte inferior de la página.

Desde mi entender, la adición de pestañasHideOnSubPages: falso a la aplicación.module.ts evitará este comportamiento, pero no es así.

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

Este es el comportamiento esperado. tabsHideOnSubPages:false es el comportamiento predeterminado. Ese no es el problema aquí. Cuando usted this.navCtrl.push(Directory); viene encima del componente WalkThrough . Directory no tiene conocimiento de las pestañas.

Solo la página de Tabs y sus hijos tendrán en cuenta las pestañas. Aquí no ha introducido las Tabs en el NavController . Entonces la matriz de navegación se ve así [WalkThrough,Directory] . En su lugar, necesita [WalkThrough, Tabs(default: Directory)] .

Necesitas presionar la página Tabs y establecer <ion-tabs selectedIndex="1"> . Puede usar navParams para pasar qué índice debe seleccionarse. Aquí hay un simulacro.

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

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

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

No lo he probado. Espero que funcione para ti.