如何添加到当前路线并导航 - Angular

Question

我在 Angular 9 项目中工作。

我有一个 table，它可以重复使用，现在我有两个 (Parent) 组件使用 table。我希望用户能够 select table 上的项目并被路由到该项目的详细信息页面。问题是这些 tables 在两条不同的路线上（比方说：/lists/parent1 和 lists/parent2），详细信息页面是这些路线的扩展。因此，如果您单击 parent1 的 table 的项目，则需要转到路线 /lists/parent1/details/${id}，如果您使用的是 parent2 的 table，则您d 转到 /lists/parent2/details/${id}。我还通过路由器传递状态数据，并设置 queryParamsHandling。

我认为可以通过多种方式做到这一点，我正在尝试找出最好的方法。

选项 1) 当用户单击 table（child 组件）中的项目时，我使 table 组件发出导致 parent 导航的事件到详情页。这是有效的，因为 parent 知道它的路线当前在哪里，所以我可以简单地做：

this.router.navigate([`lists/parent1/details/` + row.id], {
      queryParamsHandling: "merge",
      state: { data: row }
    });

在 parent1 中，在 parent2 中也是如此。缺点是两个 parent 都使用非常相似的函数（重复代码？）

选项 2) 我将当前路由从 parent 组件传递到 table (child)。这只是一个输入，我会在 table 组件中使用这个函数来导航用户：

goToDetails(row): void {
    this.router.navigate([`${currentRouteInput}/details/` + row.id], {
      queryParamsHandling: "merge",
      state: { data: row }
    });
  }

Opt3)我在table组件的构造函数中找出当前路由（withthis.router.events），然后在上面使用的goToDetails()func中设置并使用它输入参数的

选项4) ???出于某种原因，我认为有一种方法可以通过添加到当前路线来简单地导航。例如：如果你在路线 /lists/parent1，我认为有一个路由器导航功能，如 router.navigateFromRoute.(['/details/${id}'])，它只会从当前路线导航并添加到它，所以：/lists/parent1/details/${id}。但我看到的唯一路由器导航功能是 navigate() 和 navigateByUrl()。这存在吗？我不知道为什么我这么认为。

有一种方法比其他方法更好吗？我想让这个 table 组件可重用。是否有此类功能的标准做法？

我将不胜感激任何见解和提示，谢谢！

Answer 1

你可以将激活的路由传递给导航options你在构造函数中注入路由：AcitvatedRoute，在调用导航时设置。在你的 table 中你可以调用 this.router.navigate(row.id, {relativeTo: this.route}); The guide for this.

如何添加到当前路线并导航 - Angular

How to add to current route and navigate - Angular

angular

parent-child

router

angular9

navigateurl