Nested ionic-angular tabs routing with params

ionic-v1
1

I am trying to understand the concepts of routing in Angular.

I have created an application with API calls as shown below in the flow diagram.

enter image description here

Explanation for the flow

  1. The landing page of the app falls to a tabs layout - [main.routing.module.ts]
  2. On click to Tabs 2, you are routed to a new page with list of items - [tabs2.routing.module.ts]
  3. On click on one of the items which has its own “id”, subitems page is opened. routerlink is being used with params
  4. On click on one of the subitems which has its own “id”, subtabs page is opened. routerlink is being used with params - subtabs.routing.module.ts

main.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
import { AuthGuard } from 'src/app/gaurds/auth.guard';

const routes: Routes = [
    {
        path: 'tabs',
        canActivate: [AuthGuard],
        component: TabsPage,
        children: [
            {
                path: 'tabs1',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('../tabs1/tabs1.module').then(m => m.Tabs1PageModule)

                    }

                ]
            },
            {
                path: '',
                canActivate: [AuthGuard],
                loadChildren: '../Tabs2/tabs2.routing.module#Tabs2RoutingModule'
            },
            {
                path: '',
                redirectTo: '/tabs/tabs1',
                pathMatch: 'full'
            }
        ]

    },
    {
        path: '',
        redirectTo: '/tabs/tabs1',
        pathMatch: 'full'
    }
];
@NgModule({
    imports: [
        RouterModule.forChild(routes),
    ],
    exports: [RouterModule]
})
export class TabsPageRoutingModule { }

tabs2.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/gaurds/auth.guard';

const routes: Routes = [
    {
        path: 'tabs2',
        canActivate: [AuthGuard],
        children: [
            {
                path: 'items',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('../tabs2/items/items.module').then(m => m.ItemsgroupPageModule)
                    }

                ]
            },
            {
                path: 'subitems/:id',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('../tabs2/subitems/subitems.module').then(m => m.SubitemsPageModule)
                    },
                ]
            },
            {
                path: 'subtabs',
                canActivate: [AuthGuard],
                loadChildren: './subtabs/subtabs.module#SubtabsPageModule'
            },
            {
                path: '',
                redirectTo: '/shared/tabs/tabs2/items',
                pathMatch: 'full'
            }
        ]

    },
    {
        path: '',
        redirectTo: '/shared/tabs/tabs2/items',
        pathMatch: 'full'
    },
  {  },
];
@NgModule({
    imports: [
        RouterModule.forChild(routes),
    ],
    exports: [RouterModule]
})
export class Tabs2RoutingModule { }

subtabs.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes, ActivatedRoute } from '@angular/router';
import { SubtabsPage } from './Subtabs.page';
import { AuthGuard } from 'src/app/gaurds/auth.guard';

const routes: Routes = [
    {
        path: '',
        canActivate: [AuthGuard],
        component: SubtabsPageModule,
        children: [
            {
                path: 'subtabs-1/:subitems-id',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('./subtabs-1/subtabs-1.module').then(m => m.Subtabs-1PageModule)

                    }

                ]
            },
            {
                path: 'subtabs-2/:subitems-id',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('./subtabs-2/subtabs-2.module').then(m => m.Subtabs-2PageModule)

                    }

                ]
            },
            {
                path: 'subtabs-3/:subitems-id',
                canActivate: [AuthGuard],
                children: [
                    {
                        path: '',
                        loadChildren: () =>
                            import('./subtabs-3/subtabs-3.module').then(m => m.Subtabs-3PageModule)

                    }

                ]
            {
                path: '',
                redirectTo: '/tabs/tabs2/subtabs/subtabs-1',
                pathMatch: 'full'
            }
        ]

    },
    {
        path: '',
        redirectTo: '/tabs/tabs2/subtabs/subtabs-1',
        pathMatch: 'full'
    }
];
@NgModule({
    imports: [
        RouterModule.forChild(routes),
    ],
    exports: [RouterModule]
})
export class ScheduledetailsPageRoutingModule {
}

Problem

  1. I am not able send the id’s to all the subtabs/subitems as it requires id for showing data

  2. Had put the id through subtabs, as follow:

    Introductions 
        <ion-tab-button tab="subtabs-2/{{this.id}}">
        <ion-icon name="paper"></ion-icon>
        <ion-label>Legislations</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="subtabs-3/{{this.id}}">
        <ion-icon name="apps"></ion-icon>
        <ion-label>Tasks</ion-label>
    </ion-tab-button>
</ion-tab-bar>

  3. The above will route to the first subtabs correctly, and fails in working of secondary tabs

Is there a better way to do this, or to changing the routing to nested tabs with params as the Data is constant