title: Angular : Relative navigation on a named router outlet
body: <p>I have the following <strong>Angular Route</strong> configuration </p>
  
  <pre><code>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,
          }
        ]
      }
    ];
  </code></pre>
  
  <p><code>ManageComponent</code> is a sandbox component in which <code>PreviewComponent</code> and <code>EditComponent</code> will be rendered.</p>
  
  <p>An user use case redirect the user to <code>http://localhost:4200/#/(manage:manage/bar/12762)</code> which match the preview component. Everything is okay here. </p>
  
  <p>From the <code>PreviewComponent</code> and when the user clicks on a button, I want to make a relative navigation to the <code>EditComponent</code> to have, when the navigation finish, <code>http://localhost:4200/#/(manage:manage/bar/12762/add/foo)</code></p>
  
  <p>I tried </p>
  
  <pre><code>this.router.navigate([{outlets: {manage: ['add', 'foo']}}],{relativeTo: this.route});
  </code></pre>
  
  <p>and </p>
  
  <pre><code>this.router.navigate([{outlets: {manage: ['add', 'foo']}}]);
  </code></pre>
  
  <p>But every time, user is redirected to <code>http://localhost:4200/#/add/foo</code>.</p>
  
  <h3>How can I please make this navigation ?</h3>