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

Question

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

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

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

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

我很无能，因为即使我在我的 HTML 模板中打印 {{ page.url | slug }} 的值，它 returns url 带有斜杠。

Answer 1

因此，由于 Github 上的 Angular2 问题页面，我找到了解决方案（感谢 Günter！）。

我的路线是这样配置的：

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

但应该是

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

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

我创造了this issue

Answer 2

如果路径类似于

pathServedByTheController = 'foo/bar'

然后在视图中我可以做类似

的事情

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

这很适合我！

Answer 3

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

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

url = 'group/8';

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

Answer 4

如果您使用 Angular 7 或更高版本，而其他答案不适合您，则您的路径可能存在一些问题。

如果您定义一个包含多个斜线的路径，它会起作用。但是，在处理翻译时，我遇到了错误。

[{
  path: 'parentX',
  children: [
   {
     path: 'y/z'
     component: AnyComponent
   }
  ]
}]

所有功劳归功于 Dabbas 的问题并且 answer

我花了一段时间才找到他的解决方案，这就是我将其添加到此处的原因。

[{
  path: 'parentX',
  children: [
   {
     path: 'y',
     children: [
       {
        path: 'z',
        component: AnyComponent
       }
     ]
   }
  ]
}]

Answer 5

您需要像这样用 (+) 替换逗号 (,)

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>

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

Angular2 RouterLink breaks routes by replacing slash with %2F

typescript

angular

angular2-routing