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

How to add to current route and navigate - Angular

我在 Angular 9 项目中工作。

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

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

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

在 parent1 中,在 parent2 中也是如此。缺点是两个 parent 都使用非常相似的函数(重复代码?)


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



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

我将不胜感激任何见解和提示,谢谢!

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