Angular:用相对路由的navigate方法路由到子组件是行不通的

Question

在此stackblitz中给出了示例

这就是路由的结构

RouterModule.forRoot([
{
path: 'login',
component: LoginViewComponent,
children: [
{ path: 'home', component: HomeViewComponent },
{ path: 'catalog/:id', component: CatalogViewComponent }
]
},
{ path: '**', redirectTo: 'login' }
])
],

当我在login组件中，我可以用这个绝对路由去home组件

this.navigate(['login/home']);

我也可以这样使用navigateByUrl()

this.navigateByUrl(['login/home']);

但是我不明白如何与navigate()相对路由

this.navigate(['home'], { relativeTo: this.route });
this.navigate(['/home'], { relativeTo: this.route });

这些方法都没有路由到homeComponent

Answer 1

我只是在路径中添加另一个同名的路由，而不是创建子路由:

app-routing.module.ts

{ path: "activity", component: ActivityComponent },
{ path: "activity/orders", component: OrdersComponent },

如果我在activity组件中，我通过:

导航到订单

this.router.navigate(["orders"], { relativeTo: this.route });`

在活动组件中导入和构造函数

import { Router, ActivatedRoute } from "@angular/router";
constructor(
private router: Router,
private route: ActivatedRoute,
) {