Переход к дочернему маршруту с параметром маршрута относительно текущего маршрута - 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 } );
}

Answer 2

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

или

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

Вам не нужно указывать объект.