Geek Answers Handbook

Angular2 RouterLink breaks routes replacing slash% 2F

Starting with the latest version of Angular2 (2.0.0-beta.14), it is possible to have query parameters containing several slashes, for example / foo / bar.

This works fine, however whenever I use the multi-slash option in the RouterLink link, it escapes /with %2F, causing the routes to no longer work on reboot.

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

I’m even building a slug inside the pipe URIDecode, and when I record it, that’s right. It would write something like /pages/level-1/, but when I check the actual tag aon the page, it says href="/pages%2Flevel-1".

I am pretty ignorant because even when I type the value {{ page.url | slug }}in my HTML template, it returns a URL with slashes.

+4
source share
2 answers

So, I found a solution thanks to the Angular2 Issues page on Github (thanks to Günter!).

My route was configured as follows: ({ path: "/:page", component: Page, name: "Page" }),but instead there should have been a ({ path: "/*page", component: Page, name: "Page" }),Difference - this is the template *before page.

This is the problem I created: https://github.com/angular/angular/issues/8049

+3
source

If the path was something like

pathServedByTheController = 'foo/bar'

then in the view i can do something like

<my-button (click)="onEmitCta()" [routerLink]="['/'].concat(pathServedByTheController.split('/')).concat('')" class="banner-cta inverse shadow">NAVIGATE</my-button>

This works well for me!

0
source

More articles:


All Articles