在嵌套路由的情况下,角路由不起作用

I have an application. When one opens the application, then there is a login page. After successful login, you land on home page which has a side menu. With side menu, home page loads a default content. Now the issue is when I reload the application and clicks Assignment, it works fine and loads /base/home/assignments. Or if I click batches, it works fine and loads /base/home/batches. The problem is when you are on any of these pages assignments or batches, and click the other one, it doesn't take you to that page and neither gives any error. I am confused as what did I do wrong. Following is my routing -

import { NgModule } from '@angular/core';
import { RouterModule, Routes, RouteReuseStrategy } from '@angular/router';
import { BasePage } from './base.page';
import { HomePage } from './home-page/home.page';
import { DashBoardPage } from './dashboard/dashboard.page';
import { AssignmentsPage } from './assignnments/assignments.page';
import { AddAssignmentsPage } from './assignnments/add/add-assignment.page';
import { ViewAssignmentsPage } from './assignnments/view/view-assignment.page';
import { AddBatchPage } from './batches/add/add-batch.page';
import { BatchesPage } from './batches/batches.page';

const routes: Routes = [
    {
        path: 'home',
        component: HomePage,
        children: [
            {
                path: 'assignments',
                component: AssignmentsPage,
                children: [
                    {
                        path: 'view',
                        component: ViewAssignmentsPage,
                    },
                    {
                        path: 'add',
                        component: AddAssignmentsPage,
                    },
                    {
                        path: '',
                        component: AddAssignmentsPage,
                    },
                ],
            },
            {
                path: 'batches',
                component: BatchesPage,
                children: [
                    {
                        path: 'view',
                        component: ViewBatchPage,
                    },
                    {
                        path: 'add',
                        component: AddBatchPage,
                    },
                    {
                        path: '',
                        component: AddBatchPage,
                    },
                ],
            },
            {
                path: '', // child route path, to default load dashboard when home is openened from base component
                component: DashBoardPage, // child route component that the router renders
            },
        ],
    },

    {
        path: '',
        component: BasePage,
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [],
})
export class BasePageRoutingModule {}

It works only once - like I am able to go from assignments to batches pages but nothing after that.

评论