使用与当前路由相关的路由参数导航到子路由 - Angular 8

Question

我想实现这个：

<button [routerLink]="['deepRoute', deepRouteId]">Deep Route</button>

但是尽管 Angular (click) 事件，来自任何路由（包括子路由），像这样：

<button (click)="navigateToDeepRoute(deepRouteId)">Deep Route</button>

相关路由代码在我的app-routing.module.ts:

const routes: Routes = [
{
  path: 'mainRoute',
  component: MainRouteComponent,
  children: [
    {
      path: 'childRoute/:childRouteId',
      component: ChildRouteComponent,
      children: [
        {
          path: 'deepRoute/:deepRouteId'
          component: DeepRouteComponent
        }
      ]
    }
  ]
}
....

鉴于我的路由，我目前在 ChildRouteComponent:

example.com/mainRoute/childRoute/1

并想导航到：

example.com/mainRoute/childRoute/1/deepRoute/2

在我的 ChildRouteComponent 里面，我有我的导航方法：

navigateToDeepRoute(deepRouteId) {
  this.router.navigate(['deeperPath', { deepRouteId: deepRouteId}, { relativeTo: this.route.parent } ]);
}

但是没用..

我也试过：

this.router.navigate(['deeperPath', { deepRouteId: deepRouteId } ], { relativeTo: this.route } );

还有..

this.router.navigate(['../deeperPath', { deepRouteId: deepRouteId }, { relativeTo: this.route.parent } ]);

但是，仍然没有雪茄。有什么建议吗？

Answer 1

navigateToDeepRoute(deepRouteId) {
  this.router.navigate(['deeperPath', deepRouteId, { relativeTo: this.route } ]);
}

或

navigateToDeepRoute(deepRouteId) {
  this.router.navigate([`deeperPath/${deepRouteId}`, { relativeTo: this.route } ]);
}

您无需提供对象。

Answer 2

我明白了，我的问题与一个非常小的语法错误有关：

navigateToDeepRoute(deepRouteId) {
  this.router.navigate(['deeperPath', deepRouteId], { relativeTo: this.route } );
}

使用与当前路由相关的路由参数导航到子路由 - Angular 8

Navigating to child route with route parameter in relation to current route - Angular 8

typescript

angular-routing

angular

angular-router