Angular2 RouterLink breaks routes by replacing slash with %2F

Question

Since the latest Angular2 version (2.0.0-beta.14) it is possible to have query parameters that contain multiple slashes, like /foo/bar.

This works great, however whenever I use a parameter with multiple slashes within a RouterLink link, it escapes the / with %2F causing the routes to not work anymore on reload.

My link looks like this: <a [routerLink]="['/Page', {page: page.url | slug}]" class="list-group-item">{{ page.title }}</a>

Inside of the 'slug' pipe I even URIDecode the string, and when I log it it is correct. It would log something like /pages/level-1/, but when I inspect the actual a tag on the page it says href="/pages%2Flevel-1".

I'm pretty clueless, because even when I print the value of {{ page.url | slug }} within my HTML template, it returns the url with slashes.

Answer 1

You need to replace comma(,) with (+) like this

Wrong => <a [routerLink]="['/Page', page.url]" class="list-group-item">{{ page.title }}</a>
Right => <a [routerLink]="['/Page' + page.url]" class="list-group-item">{{ page.title }}</a>

Answer 2

Instead of trying to use strings with slashes in routerLink, we simply let the router handle it in the component.

<a (click)="goToPage(url)">Link</a>

url = 'group/8';

goToPage(url) {
    this.router.navigateByUrl(url);
}