CODEWITHSUNDEEP
angularroutes
shayanmalinda
shayanmalinda

Reputation: 2297

How to change the secondary route in Angular?

This is my app.routing.module.ts file

  { path: 'admin', component: AdminComponent,
    children: [
      { path: 'driverregister',outlet: 'adminnavbar', component: RegisterdriverComponent},
      { path: 'viewdrivers',outlet: 'adminnavbar', component: ViewdriversComponent},
      { path: 'editdriverdetails',outlet: 'adminnavbar', component: EditdriverdetailsComponent},
    ]
  },

After clicking the following router link

[routerLink]="[{outlets: {'adminnavbar': 'driverregister'}}]"

my URL is showing as

http://localhost:4200/admin/(adminnavbar:viewdrivers)

Now I want to change my URL to

http://localhost:4200/admin/(adminnavbar:editdriverdetails)

I tried using

[routerLink]="[{outlets: {'adminnavbar': 'editdriverdetails'}}]"

but it didn't worked. It shows the following error in the console.

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'admin' Error: Cannot match any routes. URL Segment: 'admin'

How to fix this problem?

Upvotes: 1

Views: 430

Answers (1)

observingstream
observingstream

Reputation: 466

The information in [routerLink] is an array of commands. By default, routerLink is relative to your current route. If you are already on http://localhost:4200/admin/(adminnavbar:viewdrivers), then when you use the [routerLink]="[{outlets: {'adminnavbar': 'editdriverdetails'}}]", Angular will use the current route as the base route. What you are wanting is to go back to the base route of admin.

It should look like this [routerLink]="['/admin', {outlets: {'adminnavbar': 'editdriverdetails'}}]". This says,

  1. First go to the /admin route
  2. Then go to the (adminnavbar:viewdrivers) outlet

Upvotes: 5

Related Questions