Enforce queryParameters in Angular 4 router

Question

I am trying to use this syntax to navigate with queryParams following the accepted answer in here: Sending data with route.navigate in Angular 2

this.router.navigate(['add', { queryParams: { type: $event.value } }], { relativeTo: this.route });

However instead of: .../add?type=someEventValue

this results in the optional parameters (aka matrix notation)

.../add;queryParams=%5Bobject%20Object%5D

What am I doing wrong? Is there a way to enforce the old style of search parameters in Angular 4.3.x router?

score 0 · Accepted Answer · answered Sep 05 '17 at 11:27

0

If you add optional parameters to the root route, you'll get ?param=value, if you add it to a child route, you'll get ;param=value.

Angular needs this to distinguish which route params belong to.

answered Sep 05 '17 at 11:27

So you mean that queryParams are available only from the level of root component (eg. app.component.ts)? – user776686 Sep 05 '17 at 11:42
Exactly. Query params added to other route segements result in matrix parameter form. – Günter Zöchbauer Sep 05 '17 at 11:45

score 0 · Answer 2 · answered Jul 31 '18 at 08:59

0

The queryParams object should be a part of the second argument that you pass when you call the navigate function.

What you should do is the following:

this.router.navigate(['add'], { queryParams: { type: $event.value }, relativeTo: this.route });

answered Jul 31 '18 at 08:59

2 Answers2