Dynamic angular router path

Question

This is my current router:

const routes: Routes = [
  { path: '',  component: HomeComponent },
  { path: 'filter',  component: FiltersPageComponent},
  { path: 'filter/:continent',  component: FiltersPageComponent},
  { path: '**', canActivate: [RouteLoader], component: ErrorComponent},
];

I have a dynamic url that is created when a user searches for multiple destinations.

Example of url: localhost:4200/filter/africa/botswana/europe/spain/asia/china

Can I create 1 path that will accept this url without making multiple paths like below?

{ path: 'filter/:test/:test2/:test3/:test4/:test5/:test6',  component: FiltersPageComponent}

Not sure what you want to achieve with a URL that looks like that — Robin-Hoodie
– Robin-Hoodie, Commented Nov 21, 2017 at 11:47
A user can search for multiple destinations. I put them in the url to give these destinations to another page so I can do a get request with them on that other page. But I asked this question to see if it is possible to create a dynamic path so i wouldn't have to use a limit on the amount of destinations a user can search for. — Djkobus
– Djkobus, Commented Nov 21, 2017 at 12:46

Djkobus · Accepted Answer · 2017-11-28 09:57:45Z

2

The solution I ended up using was this:

{ path: 'filter',  component: FiltersPageComponent,
  children: [
    { path: '**', component: FiltersPageComponent}
  ]
},

The only problem I can think of when using this method is that the user can randomly put anything after filter/ in the url and it will still redirect to the filtersPageComponent.

answered Nov 28, 2017 at 9:57

Djkobus

1311 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JeB · Accepted Answer · 2017-11-21 12:03:48Z

1

With path params it is impossible (and also wrong), but you should be able to do this with query params like this:

localhost:4200/yourroute?filter=africa&filter=botswana&filter=europe&filter=spain

Query params and fragments

answered Nov 21, 2017 at 12:03

JeB

12.3k11 gold badges63 silver badges88 bronze badges

Comments

Voltaire John Secondes Biton · Accepted Answer · 2017-11-21 11:48:36Z

0

No you cant. You cannot have duplicate params in your routes. IF you do so, you can only get the last data that has duplicate in the url. In your case, it will return only asia and china

answered Nov 21, 2017 at 11:48

Voltaire John Secondes Biton

7522 gold badges10 silver badges24 bronze badges

Comments

jburtondev · Accepted Answer · 2017-11-21 11:52:16Z

0

Angular's paramMap should enable this.

You can subscribe to the url parameters and run what you wish on each route respectively. See the example below:

this.route.paramMap.subscribe(params => {
    if (params.get('username'))) {
        // Route to particular path...
        // Or do something else...
    }
});

Here are some additional resources:

answered Nov 21, 2017 at 11:52

jburtondev

3,3231 gold badge19 silver badges26 bronze badges

Collectives™ on Stack Overflow

Dynamic angular router path

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related