Angular 路由 - 如何在路由路径中使用正斜杠

Question

如何在 Angular 路由中使用带有正斜杠的路径？

在 Hero 教程的基础上，我有：

{ path: 'detail/:path', component: HeroDetailComponent },

路径应该是动态的。它可以像

a/b
a/b/c
a/d/e/f

等等。关键是我不知道路径有多深，也不知道各个路径部分的名称。

在 HTML 中它的用法如下

<a routerLink="/detail/{{hero.path}}">
   {{hero.path}}
</a>

错误是

Error: Cannot match any routes.

最终目标是 Angular 服务在向服务器发出请求时使用路径作为 URL 查询参数。

我已经在 routerLink 中尝试了几个硬编码值，以确保如果我只是传递一个不带任何正斜杠的值，则代码可以正常工作。

我在这里尝试了建议，但没有成功：Forward Slash in Angular RouteParameters

我发现https://github.com/angular/angular/issues/10570似乎描述了我的问题，并声称它已于 2016 年修复。其他一些人声称它在 2017 年不起作用。

如果有人能指出我正确的方向，我会很高兴。谢谢！

Answer 1

在 HTML 中使用属性绑定[]而不是插值：{{}}

<a [routerLink]="['/detail', hero.path]">
   {{hero.path}}
</a>