带有重定向路由的 Angular RouterLinkActive

Question

I have found an interesting behavior in the way routerLinkActive when using routes with route params. The behavior only occurs when using a redirect route.

Consider an application with these two routes:

  { path: 'page2/:id', component: Page2Component },
  { path: 'page2', redirectTo: '/page2/', pathMatch: 'full' },

And, in the same app, a page with these links with routerLinkActive :

      <a 
        routerLink="/page2" 
        routerLinkActive="active"
        [routerLinkActiveOptions]="{exact: true}">Page 2</a>

      <a routerLink="/page2/foo" routerLinkActive="active">Page 2 / Foo</a>

I would expect the first link (/page2) to be have the active class only when the url is /active and not when the url is /active/foo . However, when I have the redirect route shown above, the first link never gets the active class applied to it.

It does work as expected if, instead of the redirect route, I just have a second route as follows:

  { path: 'page2/:id', component: Page2Component },
  { path: 'page2', component: Page2Component },

However, it's a better practice to use the redirect route, because then the component does not get re-loaded when navigating to itself from itself (ie navigating from /page2/foo to /page2/bar ). So I'd prefer the redirect route, but I can't see how to get the [routerLinkActiveOptions]="{exact: true}" working when using a redirect route.

Here are examples in stackblitz:

Broken example with redirect route: https://stackblitz.com/edit/angular-ivy-ii1882?file=src/app/app.module.ts

Working example with non-redirect route: https://stackblitz.com/edit/angular-ivy-rh1tj1?file=src/app/app.module.ts

Is there a solution that would allow me to have both a redirect route and a working routerLinkActiveOptions ?

Answer 1

EDIT: The real answer to this problem is to use query strings instead of route parameters for optional parameters. See below for more info.

Originally my answer was that the correct way to do this is to pass an empty parameter as part of the routerLink like this:

[routerLink]="['page2', '']"

EDIT: But actually, this approach has another side effect. routerLinks that are set to simply [routerLink]="['page2', '']" act as if {exact: true} is set to true on routerLinkActiveOptions even without adding routerLinkActiveOptions . This is because it is looking specifically for a route with an empty string as a parameter. The real solution here is to use querystring parameters instead of route parameters if the parameter is not required.

Side note: It does seem like routerLink="page2" could feasibly work the same way and my initial bug report has been changed to a feature request: Github Issue