angular - Use RouterLink from a nested component

Question

Using Angular 2 beta.0

I have a component structure like so

App (Has RouteConfig)
 -> List 
 | -> ListItem (Want to use RouterLink from here)

This results in an error: Component "List" has no route config.

So I put a RouteConfig on the List component like so...

@RouteConfig([
  {path: '/:id', name: 'Details', component: Detail}
])

But I get an error in angular like Error: Child routes are not allowed for "/list". Use "..." on the parent's route path.

I have tried adding these 3 dots before and after the /list path in that route config... with no success.

The documentation on router is very light and though I know this is supposed to be based off of ui-router, I'm not seeing the parallel to add nested routes

Answer 1

You can use it like this, in parent component:

@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/list/...', component: ListComponent, as: 'List'}
])

And then in your ListComponent, define your child routes:

@RouteConfig([
  { path: '/:id', component: ListItem, as: 'ListItem' }
])

Make sure the ListComponent has a <router-outlet></router-outlet> as well..