angular - 如何添加到当前路线并导航 - 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中同样的方式。缺点是 parent 双方都使用非常相似的函数(重复代码？)

---

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

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

---

• Opt3) 我在表组件的构造函数中找到当前路由(使用 this.router.events)，然后设置它并在 goToDetails() 中使用它code> 上面使用 func 代替输入参数。

---

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

---

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

如果有任何见解和建议，我将不胜感激，谢谢!

Answer 1

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