Posterior a investigar con especialistas en esta materia, programadores de varias ramas y maestros dimos con la solución a la cuestión y la plasmamos en esta publicación.
Solución:
Con 4.0.0-beta.18, se eliminó ion-tab y no es necesario usar salidas con nombre.
Manifestación (con dos enfoques diferentes) + Explicación:
https://github.com/servrox/demo-ionic-tab-routing
Versión CLI iónica 4.10.3
Marco iónico @ionic/angular 4.0.1
Todo esto me parecía extremadamente confuso. Luego me di cuenta de que todo lo que tenía que hacer en Tabs Routing era.
const routes: Routes = [
path: '', redirectTo: 'dashboard', pathMatch: 'full' ,
path: '',
component: TabsPage,
children: [
path: 'tab1', loadChildren: '../tab1/tab1.module#tab1Module',
path: 'tab2',
children: [
path: '', loadChildren: '../tab2/tab2.module#tab2Module',
path: ':ID', loadChildren: '../tab2/tab2details.module#tab2detailsModule',
]
,
]
,
];
Donde Tab2 tiene una página de lista y una página de detalles.
URL de la página de lista: /tabs/tab2
URL de la página de detalles: /tabs/tab2/123/
La pestaña Tab2 permanece activa cuando está en la lista o en la página de detalles, y el botón Atrás aparece cuando está en la página de detalles.
Así es como lo hice. En pestañas.router.módulo.ts,
const routes: Routes = [
path: 'tabs',
component: TabsPage,
children: [
path: 'featured',
children: [
path: '',
loadChildren: '../tab-featured/tab-featured.module#TabFeaturedPageModule'
]
,
path: 'featured/:id',
children: [
path: '',
loadChildren: '../tab-featured-detail/tab-featured-detail.module#TabFeaturedDetailPageModule'
]
,
path: 'categories',
children: [
path: '',
loadChildren: '../tab-category/tab-category.module#TabCategoryPageModule'
]
,
path: 'popular',
children: [
path: '',
loadChildren: '../tab-popular/tab-popular.module#TabPopularPageModule'
]
,
path: '',
redirectTo: '/tabs/featured',
pathMatch: 'full'
]
,
path: '',
redirectTo: '/tabs/featured',
pathMatch: 'full'
];
tab-destacado-detalle.module.ts
import IonicModule from '@ionic/angular';
import RouterModule from '@angular/router';
import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import FormsModule from '@angular/forms';
import TabFeaturedDetailPage from './tab-featured-detail.page';
@NgModule(
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([ path: '', component: TabFeaturedDetailPage ])
],
declarations: [TabFeaturedDetailPage]
)
export class TabFeaturedDetailPageModule
valoraciones y comentarios
Si te mola el asunto, eres capaz de dejar una división acerca de qué te ha gustado de este artículo.