1

我在一个 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()。这存在吗？我不知道为什么我认为它是。

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

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

4

1 回答 1

3

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

于 2020-05-01T15:08:51.863 回答