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

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

Answer 1

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

我的路线配置如下：

 template<typename A, typename B>     // 1
 auto add(A const& a, B const& b) { return a + b; }

 template<typename A, typename B>     // 2
 auto add(A const& a, B const& b) -> decltype(a + b) { return a + b; }

但应该是

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

差异是({ path: "/*page", component: Page, name: "Page" }),前面的*通配符。

我创建了this issue

Answer 2

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

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

url = 'group/8';

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

Answer 3

您需要像这样用（+）替换逗号（，）

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 4

如果路径类似

pathServedByTheController = 'foo/bar'

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

的事情

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

这对我很有用！

Answer 5

如果您使用Angular 7或更高版本，而其他答案对您没有帮助，则您的路径可能会出现问题。

如果您定义具有多个斜杠的路径，则该方法有效。但是，在进行翻译时，出现错误。

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

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

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

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

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

5 个答案: