Saltar al contenido

Ionic 4 / Angular 6: Rutas secundarias anidadas en pestañas

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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *