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

Question

我正在从事 Angular 9 项目。

我有一个可重复使用的表，现在我有两个（父）组件使用该表。我希望用户能够选择表格上的项目并路由到该项目的详细信息页面。问题是这些表位于两个不同的路由（假设：/lists/parent1和lists/parent2），并且详细信息页面是这些路由的扩展。因此，如果您单击parent1 表的某个项目，则需要转到路线/lists/parent1/details/${id}，如果您使用parent2 的表，则需要转到/lists/parent2/details/${id}。我还通过路由器传递状态数据，并设置 queryParamsHandling。

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

• 选择 1）当用户单击表中的项目（子组件）时，我会导致表组件发出事件，导致父组件导航到详细信息页面。这是有效的，因为父级知道其当前路线在哪里，所以我可以简单地执行以下操作：

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

在parent1中和在parent2中以同样的方式。缺点是父母双方都使用非常相似的函数（重复的代码？）

---

• 选择 2）我将当前路由从父组件传递到表（子组件）。这只是一个输入，我将在表组件中使用此函数来导航用户：

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

---

• Opt3）我在表组件的构造函数中找到当前路径（使用this.router.events），然后设置它并在goToDetails()上面使用的 func 中使用它而不是输入参数。

---

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

---

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

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

Answer 1

您可以将激活的路线传递给导航选项您在构造函数中注入路线：AcitvatedRoute，并在调用导航时设置它。在您的表中，您可以为此致电指南。this.router.navigate(row.id, {relativeTo: this.route});