时间戳

首页 > 解决方案 > Angular：使用具有相对路由的导航方法路由到子组件不起作用

angular - Angular：使用具有相对路由的导航方法路由到子组件不起作用

问题描述

此 stackblitz中给出了使用的示例

这就是路由的结构

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

当我在登录组件中时，我可以使用此绝对路由转到主组件

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

我也可以navigateByUrl()这样使用

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

但我不明白如何相对于navigate()

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

这些方法都没有路由到 homeComponent

标签： angulartypescriptangular-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,
) {

推荐阅读