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

Question

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

在英雄教程的基础上，我有：

{ 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 Route Parameters

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

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

Answer 1

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

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