How to specify auxiliary component for child route

Question

I am using the new route3 and would like to know what is the URL syntax to specify a auxiliary component for a child route.

I have following child route definition:

const router: RouterConfig = [
  {
    path: 'component-c', component: ComponentC, children: [
      { path: 'auxPath', component: ComponentAux, outlet: 'aux'},
      { path: 'c1', component: ComponentC1 }
    ]
  }
];

And the template for ComponentC is like

@Component({
  selector: 'component-c',
  template: `
    <div>Child Route Component</div>
    <router-outlet></router-outlet>
    <router-outlet name="aux"></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})

URL /component-c/c1 displays ComponentC1; however, i've tried many combinations like /component-c(aux:auxPath)/c1, /component-c/c1(aux:auxPath), etc. and still can't figure out how to get ComponentAux to be displayed...

Answer 1

You should try forming your URL like below.

this.router.navigateByUrl('/component-c/(c1//aux:auxPath)

As per my last investigation current router version has some issues in navigating to aux outlet using routerLink and navigate method. You should build the full URL and use navigateByUrl.

Plunker with example. Click on detail button and then admin. Admin is routed in admin outlet. Open in full screen to see URL formation.

The URL has following semantics

1. Child path is separated by /
2. If a path has siblings then it should be surrounded with parenthesis ()
3. Sibling are separated by //

4. Outlet and path is separated by :

   Parent/child/(gchild1//outletname:gchild2)

Another so question