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

Posted 2023-03-13

【中文标题】如何添加到当前路线并导航 - Angular

【英文标题】：How to add to current route and navigate - Angular

【发布时间】：2020-08-16 02:14:46

【问题描述】：

我正在从事 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()。这存在吗？我不知道为什么我会这么认为。

---

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

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

【问题讨论】：

考虑 opt4:angular.io/api/router/NavigationExtras，relativeTo 是你要找的 :)

【参考方案1】：

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