Angular

Question

所以在 angular 中我嵌套了路由，假设：

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

仪表板是单独的模块
列表是单独的模块
详情是单独的模块

现在，在 details 页面上，我还有一个小组件，与我在 list 页面上的列表类似，这也是我想将用户重定向到相同的 details 组件，但参数不同。

所以让我们从 :

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

至

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

路由器链接：

<h5 [routerLink]="['details', id, name]"></h5>

不幸的是，我总是被重定向到 /dashboard。我也尝试将 routeReuseStrategy 设置为 false。但没有成功。

我做错了什么？

@编辑，stackblitz:

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）
original-name-something-bla-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>

Angular - 重定向到具有不同参数的相同组件

Angular - redirect to same component with different parameter

angular-routing

angular-router