1

I have a child component that i want to add to my route outlet. But when i click nothing happens.

Here's my routelink

<li class="nav-item">
    <a [routerLink]="['/student-profile', 'student_schedule', student.id]"
    class="nav-link" [routerLinkActive]="['chosen']" data-toggle="pill">
        <i class="nav-icon fa fa-calendar-day">
        </i>
        <p class="nav-text">
            Student Schedule
        </p>
    </a>
</li>

Here's my studentProfileRoutingModule.

const routes: Routes = [
    {
        path: '',
        component: StudentProfileComponent
    },
    {
        path: 'address/:student_id',
        component: StudentAddressComponent
    },
    {
        path: 'contact/:student_id',
        component: StudentContactComponent
    },
    {
        path: 'guardian/:student_id',
        component: StudentGuardianComponent
    },
    {
        path: 'files/:student_id',
        component: StudentFileComponent
    },
    {
        path: 'student_record/:student_id',
        component: StudentRecordComponent
    },
    {
        path: 'student_schedule/:student_id',
        component: StudentScheduleComponent
    },
];

UPDATED
Here's my app-routing.module

path: 'student-profile/:subname/:student_id',
        canActivate: [AuthGuard],
        data: {permission: 'view_student'},
        loadChildren: () => import('./features/student-profile/student-profile.module').then(m => m.StudentProfileModule)

Here's my studentSchedule child component.

ngOnInit() {}

    getStudentScheduleBySession(studentId: any, selectedSession: number): void {
        this.apiService.getStudentScheduleBySession(
            Page.getStudentSchedule, 
            studentId, 
            selectedSession
        ).subscribe(data => {
            this.schedules = data;
        },
        error => {});
    }

Don't know what im missing and it doesn't show any errors in console.

Any help would be greatly appreciated.

Kael
  • 161
  • 2
  • 13

1 Answers1

0

WORKING EXAMPLE

forked stackblitz

Could you try the below changes?

Create a new dummy component(StudentProfileWrapper), with just <router-outlet></router-outlet> in the html (don't forget to add in declarations of studentProfileModule) and change the routing to

routes: Routes = [
    {
        path: '',
        component: StudentProfileWrapper,
        children: [
            {
                path: '',
                component: StudentProfileComponent,
            },
            {
                path: 'address/:student_id',
                component: StudentAddressComponent,
            },
            {
                path: 'contact/:student_id',
                component: StudentContactComponent,
            },
            {
                path: 'guardian/:student_id',
                component: StudentGuardianComponent,
            },
            {
                path: 'files/:student_id',
                component: StudentFileComponent,
            },
            {
                path: 'student_record/:student_id',
                component: StudentRecordComponent,
            },
            {
                path: 'student_schedule/:student_id',
                component: StudentScheduleComponent,
            },
        ],
    },
];

UPDATED Here's my app-routing.module

path: 'student-profile',
        canActivate: [AuthGuard],
        data: {permission: 'view_student'},
        loadChildren: () => import('./features/student-profile/student-profile.module').then(m => m.StudentProfileModule)
Naren Murali
  • 19,250
  • 3
  • 27
  • 54