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

【问题标题】：Angular2 RouterLink breaks routes by replacing slash with %2FAngular2 RouterLink 通过用 %2F 替换斜杠来中断路由
【发布时间】：2016-08-04 12:22:31
【问题描述】：

从最新的 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"。

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

【问题讨论】：

我猜你应该在github.com/angular 中创建一个错误报告，如果可能的话，使用 Plunker 来演示这个问题。
谢谢，明天我会创建一个新问题。
我在这里回答了这个问题：stackoverflow.com/a/61021832/271450

标签： typescript angular angular2-routing

【解决方案1】：

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

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

url = 'group/8';

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

【讨论】：

它不适用于 angular-universal，因为它将所有路由器链接替换为
谢谢。最后，我使用了从标签调用方法并使用了 location.back()。 goBack(): 无效 { this._location.back(); }
请记住，此解决方案将禁用许多用户期望的右键单击功能“在新选项卡中打开”。

【解决方案2】：

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

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>

【讨论】：

谢谢@Praveen。我尝试了不同的方法，您的回答是解决此问题的最简单和最好的方法。
您的答案对我有用（在我的情况下，我试图从函数中获取 URL 并将字符串结果附加到前缀，例如 ( {{ page.title }} ) )

【解决方案3】：

如果路径类似于

pathServedByTheController = 'foo/bar'

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

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

这对我很有效！

【讨论】：

【解决方案4】：

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

我的路线是这样配置的：

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

但应该是

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

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

我创建了this issue

【讨论】：

Simon Green (CaptainCodeman) 永远是知识的重要来源！
我无法让它与子路由一起使用。一旦我把 * 放在那里，它就会停止在代码中设置参数。
确实，这行不通，至少现在不行了。我正在使用 Angular 路由器 7.2.14。而且我看不出这怎么会起作用，因为一旦你把星号 (*) 放在参数前面，它就不再是一个参数，而只是一个带有通配符的字符串。

【解决方案5】：

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

如果你定义一个带有多个斜杠的路径，它就可以工作。但是，在处理翻译时，我遇到了错误。

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

所有功劳归于 Dabbas 的问题和 answer

我花了一段时间才找到他的解决方案，这就是我在这里添加它的原因。

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

【讨论】：