使用相对于当前路径的路径参数导航到子路径-角度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 } );
}