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

Answer 1

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.