"@angular/router": "3.0.0-beta.2" - multiple <router-outlet> (question)

[John Hart]

Why aren't multiple <router-outlet> elements within a component supported?

Or more specifically, why are all <router-outlet> elements within a component other than the last one in the component template ignored?

I have a case where I'd like the same component to be placed within multiple <router-outlet> elements on my page... but this is not supported.

[Sander Elias]

Hi John,

They are supported. However, you need to name them, then you can point any route to the specific outlet. If you put in duplicates at the same 'level' only the last occurrence will get used. 

using this, you can direct your router to put the same component in different outlets, but you need to put each one into a named outlet, and specify it.

Regards

Sander

 

[John Hart]

There are cases where it would be useful to literally "inject" (is this the right term?) the same component two places within a parent (e.g. some kind of social media badge/button component)... and thus there would be a desire for two <router-outlet> elements within the page... If I were to do something like this <router-outlet name="social1"></router-outlet> and then somewhere else in the component template have <router-outlet name="social2"></router-outlet> what would the `RouterConfig` and `[RouterLink]` need to look like to populate both?

[Steven Luke]

Check out this block: http://victorsavkin.com/post/145672529346/angular-router

If you had three routers  

<router-outlet></router-outlet> //no name == the default

<router-outlet name="social1"></router-outlet>
<router-outlet name="social2"></router-outlet>

Then the RouteConfigs to target each would be like:

{path: 'thepath1', component: TheComponent} //no outlet for the default

{path: 'thepath2', component: TheComponent, outlet: 'social1'}
{path: 'thepath3', component: TheComponent, outlet: 'social2'}

And the urls you would want to build would be like this:

/thepath1(social1: /thepath2)(social2: /thepath3)

At least, that is my understanding: to target a specific named outlet, you use parenthesis, name the outlet, and then give the path.  To target the default you don't use parens.  You can keep extending the path inside the targeted outlet: (social1: /thepath2/123/more) and my guess is if you had nested named outlets it would look like: (social1:/thepath2 (butterfly1: /morepath)).  But that, again, is a guess.

[John Hart]

@Steven Luke - thanks for the suggestions - the blog post is very informative, but it doesn't really address my scenario - and I still can't get this to work - I created a simplified Plunker to experiment with this - I am able to "populate" a primary <router-outlet> and I am able to populate an auxiliary <router-outlet>, but I am unable to populate both (I get a route not found)...

http://plnkr.co/edit/PI7qaWLVwG6CYOwm7iJC?p=preview

Does the Angular2 development team monitor this group? or should I post a "bug"/"question" to their Github site?