Angular2 RouterLink通过将斜杠替换为％2F来中断路由

问题描述

自从最新的Angular2版本(2.0.0-beta.14)起，就有可能具有包含多个斜杠的查询参数，例如/foo/bar.

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

这很好用，但是，每当我在RouterLink链接中使用带有多个斜杠的参数时，它都会通过%2F转义/，从而导致路由在重新加载时不再起作用.

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.

我的链接如下:<a [routerLink]="['/Page', {page: page.url | slug}]" class="list-group-item">{{ page.title }}</a>

在子弹"管道内，我什至URIDecode字符串，并且在登录时是正确的.它会记录类似/pages/level-1/的内容，但是当我检查页面上的实际a标记时，它显示为href="/pages%2Flevel-1".

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".

我一无所知，因为即使我在HTML模板中打印{{ page.url | slug }}的值，它也会返回带有斜杠的url.

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.

推荐答案

因此，我在Github上的Angular2 Issues页面上找到了解决方案(感谢Günter！).

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

我的路线配置如下:

({
    path: "/:page",
    component: Page,
    name: "Page"
}),

但应该是

({
    path: "/*page",
    component: Page,
    name: "Page"
}),

差异是page前面的*通配符.

我创建了此问题

这篇关于Angular2 RouterLink通过将斜杠替换为％2F来中断路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！