Angular2 RouterLink通过用%2F替换斜杠来中断路由

Question

从最新的Angular2版本(2.0.0-beta.14)开始,可以使用包含多个斜杠的查询参数,例如/ foo/bar.

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

我的链接看起来像这样: <a [routerLink]="['/Page', {page: page.url | slug}]" class="list-group-item">{{ page.title }}</a>

在'slug'管道内部我甚至URIDecode是字符串,当我记录它时它是正确的.它会记录类似的东西/pages/level-1/,但当我检查a页面上的实际标签时,它说href="/pages%2Flevel-1".

我很无能,因为即使我{{ page.url | slug }}在HTML模板中打印了值,它也会返回带有斜杠的url.

Answer 1

您需要将逗号（，）替换为（+），如下所示

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

我们没有尝试在 routerLink 中使用带斜杠的字符串，而是让路由器在组件中处理它。

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

url = 'group/8';

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

Answer 3

所以我通过 Github 上的 Angular2 Issues 页面找到了解决方案（感谢 G\xc3\xbcnter！）。

\n\n

我的路线配置如下：

\n\n

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

\n\n

但应该是

\n\n

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

\n\n

区别就是*前面的通配符page。

\n\n

我创建这个问题

\n