Angular2 RouterLink 通过用 %2F 替换斜线来中断路由 [英] Angular2 RouterLink breaks routes by replacing slash with %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>

在 'slug' 管道内，我什至 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".

我很无知，因为即使我打印了 {{ page.url | 的值slug }} 在我的 HTML 模板中，它返回带有斜杠的 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 问题页面找到了解决方案(感谢 Günter！).

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

我的路由是这样配置的:

My route was configured like this:

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

但应该是

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

区别在于page前面的*通配符.

Difference is the * wildcard in front of page.

我创建了这个问题

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