Angular 2 Router: multiple route parameters

Question

I want to have a route with that url

/collections/:collectionId/books/:bookId/:title

e.g.

/collections/10/books/456678/my-book.html

in my app-routing.module.ts file

{path: 'collections/:collectionId/books/:bookId/:title', component: BookDetailsComponent},

Is is possible without using nested router outlets?

I tried

this.router.navigate(['/collections',{collectionId: 10, bookId: 456678, title: "my-book.html"}]);

but got an error like

Cannot match any routes. URL Segment: 'collections;collectionId=10;bookId=456678;title=my-book.html'

if I pass the paramaters as an array instead,

this.router.navigate(['/collections', 10, 456678, "my-book.html"]);

I get

Error: Cannot match any routes. URL Segment: 'collections/10/456678/my-book.html

I managed to achieve what I wanted using a 'books' child route under the 'collections' route, but I'd like to do it without nested routes.

Thanks

What exactly you pass as an array to router.navigate?

Dimanoid
– Dimanoid

2016-12-07 09:55:42 +00:00
Commented Dec 7, 2016 at 9:55 — Dimanoid
– Dimanoid, Commented Dec 7, 2016 at 9:55
@Dimanoid : i edited my question to show more code

David
– David

2016-12-07 10:47:23 +00:00
Commented Dec 7, 2016 at 10:47 — David
– David, Commented Dec 7, 2016 at 10:47
You missed 'books' as a part of the path

Dimanoid
– Dimanoid

2016-12-07 11:11:47 +00:00
Commented Dec 7, 2016 at 11:11 — Dimanoid
– Dimanoid, Commented Dec 7, 2016 at 11:11
@Dimanoid: yes that was the problem, thanks

David
– David

2016-12-07 11:19:25 +00:00
Commented Dec 7, 2016 at 11:19 — David
– David, Commented Dec 7, 2016 at 11:19

Günter Zöchbauer · Accepted Answer · 2016-12-07 11:18:41Z

12

It should be

this.router.navigate(['/collections', '10', 'books', '456678', "my-book.html"]);

The quotes around the numbers are not necessary but I think it's good practice.

edited Dec 7, 2016 at 11:18

answered Dec 7, 2016 at 10:48

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

4 Comments

David Over a year ago

Thanks. However, it only seems to work if I have a <router-outet> in the corresponding template, as otherwise I get the error Cannot find primary outlet to load 'BookDetailsComponent'

Günter Zöchbauer Over a year ago

Thanks for the hint about the comma. Not sure what you mean with the router outlet. A router-outlet is always mandatory. If you think it shouldn't for your case then a Plunker with a reproduction would be great to investigate.

David Over a year ago

The code (this.router.navigate...) is in a CollectionComponent, whose template contains no router outlet. My router-outlet is in my AppComponent. I'll try to create a plunker

Günter Zöchbauer Over a year ago

I agree that it shouldn't require a router-outlet in this case because you are using an absolute path (starting with /)

Collectives™ on Stack Overflow

Angular 2 Router: multiple route parameters

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related