Navigate to other component but maintain link, only add /notifications on current llink

How can I route to the another module child component?

I have Core module where I hold NavBar component. From NavBar component, on click to one of the links I should redirect user to the Notifications component from Core Module. But I need to define the url as /profesor/notifications

NavBar component:

 <li><a routerLink="/profesor/notifications"><i ></i> Notifications </a></li>

I don't have any defined route in NavBar routing module.

In app-routing.module

  { path: 'profesor', component: ProfesorHomeComponent },

In profesor-routing.module

const routes: Routes = [
  { path: '', component: ProfesorHomeComponent },
  { path: 'notifications', component: NotificationsComponent },
];

What am I doing wrong?

StackBlitz: Now there is Stackblitz so if you can check it out. But please only add /profesor to the link and then try to navigate to profesor/notifications

https://stackblitz.com/edit/angular-ivy-vdytbz?file=src/app/profesor/profesor.module.ts

CodePudding user response：

Notifications are not a child of the professor module. to fix this, move notifications to the children routes

const routes: Routes = [
  { path: '', component: ProfesorHomeComponent , 
 children : [
  { path: 'notifications', component: NotificationsComponent }]},
];

and inside ProfesorHomeComponent HTML template include router-outlet to render the children components

<router-outlet></router-outlet>

or you can call the notifications directly if the module is not a lazyload

 <li><a routerLink="/notifications"><i ></i> Notifications </a></li>

CodePudding user response：

Here how I have done it. The nav bar looks something like this:

 <a [routerLink]="['/main', { outlets: { c: ['dashboard'] } }]">
      Dashboard </a>
    
 <a [routerLink]="['/main', { outlets: { c: ['membership'] } }]">
       Memberships </a>
    
 <a [routerLink]="['/main', { outlets: { c: ['client'] } }]">
      Clients </a>

and the routing module is:

const appRoutes: Routes = [
  { path: 'main', component: MainComponent, children: [
      {path:'dashboard', component: DashboardComponent, outlet: 'c'},
      {path:'membership', component: MembershipComponent, outlet: 'c'},
      { path: 'client', component: ClientComponent, outlet: 'c' },
    ]},
];

Then inside the main component:

<router-outlet name="c"></router-outlet>

If you need more explination please let me know.