Ionic 4 / Angular 6 : Nested child routes in tabs
With 4.0.0-beta.18 ion-tab was removed and it's not necessary to use named outlets.
Demo (with two different approaches) + Explanation:
https://github.com/servrox/demo-ionic-tab-routing
Ionic CLI version 4.10.3
Ionic Framework @ionic/angular 4.0.1
This all seemed extremely confusing to me.Then i realised that all i had to do in Tabs Routing was.
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'}, ] }, ] },];
Where Tab2 has a List Page and a details page.
List Page URL : /tabs/tab2
Details Page URL : /tabs/tab2/123/
The Tab2 Tab stays active when your on the list or details page, and the back button shows up when your on the details page.
This is how I did. In tabs.router.module.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-featured-detail.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 {}