Nested ionic-angular tabs routing with params

Question

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.

Explanation for the flow

The landing page of the app falls to a tabs layout - [main.routing.module.ts]
On click to Tabs 2, you are routed to a new page with list of items - [tabs2.routing.module.ts]
On click on one of the items which has its own "id", subitems page is opened. routerlink is being used with params
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

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

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>

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

armourshield armourshield · Accepted Answer · 2019-09-27T11:49:30

This won't be the best method to follow.

After lot of searching, I added routerlink to the ion-tab tags

The routing works with taking the id from the routerlink,

<ion-tabs>
        <ion-tab-bar slot="top">
            <ion-tab-button tab="subtabs-1">
                <ion-icon name="book"></ion-icon>
                <ion-label>SubTabs 1</ion-label>
            </ion-tab-button>

            <ion-tab-button tab="subtabs-2" [routerLink]="['subtabs-2', this.id]">
                <ion-icon name="paper"></ion-icon>
                <ion-label>SubTabs 1</ion-label>
            </ion-tab-button>

            <ion-tab-button tab="subtabs-3" [routerLink]="['subtabs-3', this.id]">
                <ion-icon name="apps"></ion-icon>
                <ion-label>SubTabs 1</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

The Id will be provided by subtabs.page.ts by declaring a variable as id: any.

The value for id is being provided from subitems.page.ts.

Here the id is subitems-id

Nested ionic-angular tabs routing with params

1 Answers