Angular route with Query Parameter and Appended Route

Question

I am using angular 9 application.

I have a routing file with the below code :

{ path: 'a/:id', component: AComponent },
{ path: 'a/b', component: BComponent },
{ path: 'a/c', component: CComponent }

I want to have the same route 'a' with query parameter id as well as appended routes (b & c)

When I am trying to navigate to 'a/b' OR 'a/c', the URL in the browser gets updated, however, it doesn't actually navigates to the desired route.

Is there any way to achieve this?

Route `a/:id` match all cases. If you really need this kind of routes, try to change the order of elements. The most generic rule should be last. — Karol Trybulec, Jun 11 '20 at 23:15
In vueJs this is common and you need to `watch` the route, check this out https://stackoverflow.com/questions/34444822/angular2-watch-for-route-change/42963148 — Sweet Chilly Philly, Jun 11 '20 at 23:36

score 0 · Accepted Answer · answered Jun 11 '20 at 23:23

0

The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes.

In your case:

{ path: 'a/b', component: BComponent },
{ path: 'a/c', component: CComponent },
{ path: 'a/:id', component: AComponent },

answered Jun 11 '20 at 23:23

Rachid O

13,013
15
66
92

Can't believe I missed this simple thing. Thank you so much! – Suraj Agrawal Jun 12 '20 at 00:20

Angular route with Query Parameter and Appended Route

1 Answers1