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

Question

我在一个Angular 9项目中工作。

我有一个表，是可重用的，目前我有两个（Parent）组件使用该表。我希望用户能够在表中选择一个项目，并被路由到该项目详情页。问题是这些表在两个不同的路由（比方说。/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代替输入param.Opt4) ?

---

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

---

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

我将感谢任何见解和技巧，谢谢你!

Answer 1

你可以将激活的路由传递给导航的对象。选项 你在构造函数中注入route.AcitvatedRoute。在构造函数中注入AcitvatedRoute，并在调用导航时设置它。在你的表中，你可以调用 this.router.navigate(row.id, {relativeTo: this.route});这方面的指导。