0

I would like all of my routes' components to be nested in a BaseLayout component. This is easy for simple examples using router-outlet, where the entire child component is injected into the router-outlet. Is it possible define multiple places for a child to inject content into the parent? Similar to how named ng-content blocks work? I would like a child route component to be able to define content for header, main, and footer.

muaddoob
  • 113
  • 1
  • 6

1 Answers1

0

The new docs for routing states:

A template may hold exactly one unnamed . The router supports multiple named outlets, a feature we'll cover in future.

So to make it work you'd add a name attribute on your <router-outlet name="aux"></router-outlet> and use that in your route config:

{path: '/chat', component: ChatCmp, outlet: 'aux'}

See more in this answer: https://stackoverflow.com/a/38096837/2972

Community
  • 1
  • 1
MartinHN
  • 19,542
  • 19
  • 89
  • 131
  • I don't think aux routes is what I want. I'd like to do something like: `{path: '', component: BaseLayoutComponent, children: [ {path: '', component: HomeComponent} ]}` and have the HomeComponent template define multiple content blocks which are injected into the BaseLayout template. – muaddoob Aug 02 '16 at 20:08
  • Then I think you need the deprecated routing, which won't last very long. – MartinHN Aug 02 '16 at 20:09
  • Our whole project already uses the latest router, so we won't revert to the deprecated one. Is there a way to do this with aux routes? It seems like it's solving a different problem. – muaddoob Aug 02 '16 at 20:14
  • It probably is, but I'm not sure exactly how. It does seem like they try to explain something similar in the new docs. – MartinHN Aug 02 '16 at 20:24
  • Yeah, it's not very clear in the current docs. I'll live with some markup duplication for now and hopefully docs get updated with more info soon. thx – muaddoob Aug 02 '16 at 20:55