Angular 5 routing between child routes with/without ID

Question

I have an Angular 5 app with a module with a routing configuration shown below

const routes: Routes = [
      {
        path: 'user/:userId',
        component: UserSelectionComponent,
        children: [
          {
            path: 'overview',
            component: OverviewComponent
          },
          {
            path: 'selection',
            component: SelectionComponent
          },
          {
            path: 'selection/:groupId',
            component: SelectionComponent
          }
        ]
      }
    ];

I have a save function in my SelectionComponent.ts which i want to route to the OverviewComponent when a save button is clicked.

this._router.navigate([`../overview`], { relativeTo: this.route });

This works OK when I navigate to selection without an ID. However when I pass in an ID it routes from http://localhost:4200/user/1/selection/1 to http://localhost:4200/user/1/selection/overview rather than http://localhost:4200/user/1/overview

How can I use the same router.navigate code to navigate back from the SelectionComponent to the OverviewComponent whether on not an ID has been passed in?

Answer 1

You could use a simple if/else switch. Navigate to ../../overview instead of ../overview when the selection ID is defined.