Angular Router无法解析所需的参数

Question

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

版本：

• @ angular / core：7.2.6
• @ angular / router：7.2.6

---

我要完成的任务

我在一页上有产品列表，在第二页上有详细信息。 页面的路由如下：

• 主页：/product-list
• 详细信息页面：/product-list/:id/info

详细信息页面是相对于主页的。

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

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，则可以导航到该网址，因此使用['01-CE/info']作为配置重定向到该网址。这样看来路由器无法按照文档中所述进行操作，或者我做错了什么？

Answer 1

该数组不是替代品，它是一个联接。

尝试

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

Answer 2

使用[':id/info', item.id]只需更改['item.id', 'info']