如何添加到当前路线并导航 - Angular
How to add to current route and navigate - Angular
我在 Angular 9 项目中工作。
我有一个 table,它可以重复使用,现在我有两个 (Parent) 组件使用 table。我希望用户能够 select table 上的项目并被路由到该项目的详细信息页面。问题是这些 tables 在两条不同的路线上(比方说:/lists/parent1
和 lists/parent2
),详细信息页面是这些路线的扩展。因此,如果您单击 parent1 的 table 的项目,则需要转到路线 /lists/parent1/details/${id}
,如果您使用的是 parent2 的 table,则您d 转到 /lists/parent2/details/${id}
。我还通过路由器传递状态数据,并设置 queryParamsHandling。
我认为可以通过多种方式做到这一点,我正在尝试找出最好的方法。
- 选项 1) 当用户单击 table(child 组件)中的项目时,我使 table 组件发出导致 parent 导航的事件到详情页。这是有效的,因为 parent 知道它的路线当前在哪里,所以我可以简单地做:
this.router.navigate([`lists/parent1/details/` + row.id], {
queryParamsHandling: "merge",
state: { data: row }
});
在 parent1 中,在 parent2 中也是如此。缺点是两个 parent 都使用非常相似的函数(重复代码?)
- 选项 2)
我将当前路由从 parent 组件传递到 table (child)。这只是一个输入,我会在 table 组件中使用这个函数来导航用户:
goToDetails(row): void {
this.router.navigate([`${currentRouteInput}/details/` + row.id], {
queryParamsHandling: "merge",
state: { data: row }
});
}
- Opt3)我在table组件的构造函数中找出当前路由(with
this.router.events
),然后在上面使用的goToDetails()
func中设置并使用它输入参数的
- 选项4) ???出于某种原因,我认为有一种方法可以通过添加到当前路线来简单地导航。例如:如果你在路线
/lists/parent1
,我认为有一个路由器导航功能,如 router.navigateFromRoute.(['/details/${id}'])
,它只会从当前路线导航并添加到它,所以:/lists/parent1/details/${id}
。但我看到的唯一路由器导航功能是 navigate()
和 navigateByUrl()
。这存在吗?我不知道为什么我这么认为。
有一种方法比其他方法更好吗?我想让这个 table 组件可重用。是否有此类功能的标准做法?
我将不胜感激任何见解和提示,谢谢!
你可以将激活的路由传递给导航options你在构造函数中注入路由:AcitvatedRoute,在调用导航时设置。在你的 table 中你可以调用 this.router.navigate(row.id, {relativeTo: this.route});
The guide for this.
我在 Angular 9 项目中工作。
我有一个 table,它可以重复使用,现在我有两个 (Parent) 组件使用 table。我希望用户能够 select table 上的项目并被路由到该项目的详细信息页面。问题是这些 tables 在两条不同的路线上(比方说:/lists/parent1
和 lists/parent2
),详细信息页面是这些路线的扩展。因此,如果您单击 parent1 的 table 的项目,则需要转到路线 /lists/parent1/details/${id}
,如果您使用的是 parent2 的 table,则您d 转到 /lists/parent2/details/${id}
。我还通过路由器传递状态数据,并设置 queryParamsHandling。
我认为可以通过多种方式做到这一点,我正在尝试找出最好的方法。
- 选项 1) 当用户单击 table(child 组件)中的项目时,我使 table 组件发出导致 parent 导航的事件到详情页。这是有效的,因为 parent 知道它的路线当前在哪里,所以我可以简单地做:
this.router.navigate([`lists/parent1/details/` + row.id], {
queryParamsHandling: "merge",
state: { data: row }
});
在 parent1 中,在 parent2 中也是如此。缺点是两个 parent 都使用非常相似的函数(重复代码?)
- 选项 2) 我将当前路由从 parent 组件传递到 table (child)。这只是一个输入,我会在 table 组件中使用这个函数来导航用户:
goToDetails(row): void {
this.router.navigate([`${currentRouteInput}/details/` + row.id], {
queryParamsHandling: "merge",
state: { data: row }
});
}
- Opt3)我在table组件的构造函数中找出当前路由(with
this.router.events
),然后在上面使用的goToDetails()
func中设置并使用它输入参数的
- 选项4) ???出于某种原因,我认为有一种方法可以通过添加到当前路线来简单地导航。例如:如果你在路线
/lists/parent1
,我认为有一个路由器导航功能,如router.navigateFromRoute.(['/details/${id}'])
,它只会从当前路线导航并添加到它,所以:/lists/parent1/details/${id}
。但我看到的唯一路由器导航功能是navigate()
和navigateByUrl()
。这存在吗?我不知道为什么我这么认为。
有一种方法比其他方法更好吗?我想让这个 table 组件可重用。是否有此类功能的标准做法?
我将不胜感激任何见解和提示,谢谢!
你可以将激活的路由传递给导航options你在构造函数中注入路由:AcitvatedRoute,在调用导航时设置。在你的 table 中你可以调用 this.router.navigate(row.id, {relativeTo: this.route});
The guide for this.