Angular 路由器未解析所需参数

Question

我正在使用 Angular 和 Angular 路由器创建一个应用程序。为了导航到其中一个子页面，我需要在 url 中输入一个必需的参数。可以在 Angular docs 中找到如何完成此操作。但不知何故，这种方法在我的项目中不起作用。

版本：

我想要完成的事情

我的第一页是产品列表，第二页是详细信息。页面路径如下：

详情页相对于主页。

我试过通过以下方式导航到该页面：

this.router.navigate(
  [':id/info', item.id], 
  { relativeTo: this.activatedRoute }
)

但这会导致 Angular 路由器出错：Error: Cannot match any routes. URL Segment: ':id/info/03-BR'。

我在 stackblitz 中重现了此行为。

手动更改:id

如果我自己替换 :id，我可以导航到 url，因此使用 ['01-CE/info'] 作为配置重定向到 url。所以看起来路由器没有像文档中描述的那样工作，还是我做错了什么？

Answer 1

数组不是替换，而是连接。

尝试

this.router.navigate(
  [item.id, 'info'], 
  { relativeTo: this.activatedRoute }
)

Answer 2

只需将 [':id/info', item.id] 更改为 ['item.id', 'info']

Angular Router does not resolve required parameters