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>

Angular route - how to use forward slashes in routing path