Angular : Relative navigation on a named router outlet

Question

I have the following Angular Route configuration

const appRoutes: Routes = [
    {
      path: '',
      component: DirectoryComponent
    },
    {
      path: 'manage/:type/:id',
      component: ManageComponent,
      outlet: 'manage',
      children: [
        {
          path: '',
          component: PreviewComponent,
          pathMatch: 'full'
        },
        {
          path: 'add/:elementType',
          component: EditComponent,
        }
      ]
    }
  ];

ManageComponent is a sandbox component in which PreviewComponent and EditComponent will be rendered.

An user use case redirect the user to http://localhost:4200/#/(manage:manage/bar/12762) which match the preview component. Everything is okay here.

From the PreviewComponent and when the user clicks on a button, I want to make a relative navigation to the EditComponent to have, when the navigation finish, http://localhost:4200/#/(manage:manage/bar/12762/add/foo)

I tried

this.router.navigate([{outlets: {manage: ['add', 'foo']}}],{relativeTo: this.route});

and

this.router.navigate([{outlets: {manage: ['add', 'foo']}}]);

But every time, user is redirected to http://localhost:4200/#/add/foo.

How can I please make this navigation ?

Answer 1

I know that it's an old question, but I found a solution while I'm looking for an answer.

You can use { relativeTo: this.activatedRoute.parent } and everything works like a charm.