1

If I navigate programmatically using Router's navigate method

this.router.navigate(['/articles', {id: 1}]); result url is /articles;page=1

and the second way

this.router.navigate(['/articles', id]); result url is /articles/1

In both variant I can get values via this.activatedRoute.params.forEach((params: Params) => {});

So what is the difference except style?

P.S. Found question related to differences between query params & matrix params

Community
  • 1
  • 1
Rakhat
  • 4,783
  • 4
  • 40
  • 50

1 Answers1

3

{id: 1} in ['/articles', {id: 1}] is an optional route parameters and added as matrix parameters to child routes and query parameters to the root route

['/articles', id] is a normal and required route parameter that replaces :id in the route path.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thx for clearfication, but what is the best choice for setting optional parameter like page number: /articles?page=1 or /articles;page=1 ? – Rakhat Dec 02 '16 at 09:02
  • That depends on what you want to accomplish. `:id` is used for route matching. Query and matrix parameters just pass values along while not being considered for route matching. It also depends if you want `/articles` to be a valid route or only `/articles/someid`. – Günter Zöchbauer Dec 02 '16 at 09:04
  • Actually `/article;page=1` is invalid. There is a change coming to make this an error. As mentioned optional route parameters on the root route are serialized as query parameters, therefore only the former is valid. `/parent/child;someparam=somevalue?page=1` would be valid because `someparam` is a parameter on a child route. I don't know how that behaves when you have an empty path root route and `article` is the child route. In this case your 2nd example might be valid. Had to test to know what the resulting behavior would be. – Günter Zöchbauer Dec 02 '16 at 09:11