Angular Router 无法解析所需的参数答案

【问题标题】：Angular Router does not resolve required parametersAngular Router 无法解析所需的参数
【发布时间】：2019-07-16 14:49:45
【问题描述】：

我正在使用 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。所以看起来路由器不能像文档中描述的那样工作，还是我做错了什么？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

试试

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

【讨论】：