Question

所以在角度中，我嵌套了路由，可以这样说：

domain.com/dashboard/list/:listId/:listName/details/:detailsName/:detailsId

仪表板是单独的模块
列表是单独的模块
详细信息是单独的模块

现在，在details页上，我还有一个小组件，其内容与我在list页上的列表类似，所以我也希望将用户重定向到相同的{{1} }组件，但参数不同。

所以我们从：

details

到

domain.com/dashboard/list/1/test_list_name/details/test_details_name/4

RouterLink：

domain.com/dashboard/list/1/test_list_name/details/another_test_details_name/8

不幸的是，我总是被重定向到<h5 [routerLink]="['details', id, name]"></h5>。我也通过将/dashboard设置为routeReuseStrategy来进行尝试。但是没有成功。

我做错了什么？

@Edit，堆叠闪电战：

https://stackblitz.com/edit/angular-q8fasa

在stackblitz示例中，我只想从仪表板秒组件中打开另一个仪表板秒组件（具有不同的参数）。在此示例中，我仅使用了一个嵌套路由，但是问题完全相同。

很抱歉，我的例子很丑陋，但我相信您会理解我的问题。

Answer 1

使用RouterModule.forRoot(routes, { enableTracing: true })，我在控制台中看到以下内容：

Event: NavigationEnd NavigationEnd(id: 3, url: '/dashboard/dashboard-second/original-name-something-bla-bla/87/dashboard-second/other-name/11', urlAfterRedirects: '/dashboard') NavigationEnd {id: 3, url: "/dashboard/dashboard-second/original-name-something-bla-bla/87/dashboard-second/other-name/11", urlAfterRedirects: "/dashboard"}

因此它有两次dashboard-second。

我必须将路由器链接更改为：

<h5 [routerLink]="['../../../../dashboard-second', 'other-name', 11]" >Go to dashboard-second 1</h5>

它可以解决问题。 4 ..将返回到/dashboard。每个..转到：

87（即：/ 87 / .. = / 87）
原始名称的东西bla
仪表板秒数
/仪表板

花费4 ..有点不直观，我认为应该花费3，但这是有道理的，因为它是相对的。因此，您最终会这样做：

/dashboard/dashboard-second/original-name-something-bla-bla/87/../../../../dashboard-second/other-name/11

解析为：

/dashboard/dashboard-second/other-name/11

您还可以设置绝对路径，但需要注意的是，如果在/ dashboard-second处移动路线，则使用绝对路径时更有可能必须更新routerLink：

<h5 [routerLink]="['/dashboard/dashboard-second', 'name-name-name', 13]" >Go to dashboard-second 3</h5>

角度-使用不同的参数重定向到相同的组件

1 个答案: