EXCEPTION: Root segment cannot have matrix parameters

Question

Html:

[routerLink]="['', {'scrollTo': '#contact'}]"

TS:

this.route.params.forEach((params: Params) => {
    if (params['scrollTo']) {
        // some code here
    }
});

Error: EXCEPTION: Root segment cannot have matrix parameters

I can't have 'scrollTo' param in my routerLink?

It clearly appears on the angular 2 documentation: https://angular.io/docs/ts/latest/guide/router.html#!#appendix-link-parameters-array

EDIT:

Doesn't seem to complaint with : <a [routerLink]="['/crisis-center', { scrollTo: '#contact' }]">Crisis Center</a>. But I need it with my '' root route.

Answer 1

Recently, it is done this way in Angular 5+:

<a [routerLink]="['/']" [queryParams]="{ 'tour': true }"> text </a>

Doing [routerLink]="['/', { 'tour': true' }]"> text </a> would throw the error

Answer 2

The accepted answer is wrong, it sets query params (e.g ?myparam=true). To set matrix parameters (e.g ;myparam=15;foo=foo) the syntax is:

[routerLink]="['.', {'scrollTo': '#contact'}]"

Notice the period in the route. As is explained here:

https://github.com/angular/angular/issues/9505

That's how to set matrix parameters, and it fails with "''" because that's for the root route, which apparently won't allow matrix parameters-

Answer 3

The root segment cannot have matrix params. There are two reasons for this:

• There is no place in the URL to put them.
• Currently we reuse components when their parameters change, but in the future we will provide a way to customize the reuse behavior. So the developer will be able to get a new copy of a component any time its args change. Since the root component is created statically, we cannot implement it for the root component.