Angular: relative navigation on a named router

I have the following Angular Configuration Route

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

- a component of the sandbox, which will be displayed PreviewComponent

and EditComponent

.

The user use case redirects the user to the http://localhost:4200/#/(manage:manage/bar/12762)

one that matches the preview component. Everything is all right here.

From PreviewComponent

and when the user clicks on the button, I want to make the relative navigation to EditComponent

, to have when the navigation ends,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 the user is redirected to http://localhost:4200/#/add/foo

.

How can I make this navigation?