Choose which router-outlet that should be used to render the content of a route

Question

I've got a nav component which is a menu that handles a bit of route switching, the problem I have is that I can't seem to render the content of the routes because I don't have a router-outlet within the nav component template.

Instead I would like to render the content of the route in my main app component core, but how do I tell angular to use the router-outlet in my core component rather than in my nav component?

Since my [routerLink] is inside this template:

nav.component.html:

<nav class="nav-wrapper" [class.is-toggled]="isToggled" [class.is-hidden]="!isToggled">
  <ul class="nav-links">
    <li class="nav-link" *ngFor="#link of links">
      <a [routerLink]="link.href">
        <div class="label-wrapper">{{link.label}}</div>
        <div class="icon-wrapper"><i class="{{link.icon}}"></i></div>
      </a>
    </li>
  </ul>
</nav>

It doesn't want to render the route into the core component:

core.component.html:

<!-- The menu -->
<nav-list></nav-list> 

<!-- The router-outlet which should render the videos component -->
<router-outlet></router-outlet>

videos.component.html:

<h1>My videos</h1>

<!-- This should render the child views of the videos component -->
<router-outlet></router-outlet>

list.videos.component.html:

<h1>Videos list</h1>

So as you can see I want the bottom snippet to be rendered into the middle snippet which is then rendered at the top, inside the core component.

How can I do this?

The bottom line is that I DO NOT want to have a router-outlet in the nav component.

Answer 1

So I've a similar setup where I've a main layout component:

<shellheader (menuToggle)="onMenuToggle($event)"></shellheader>

<section id="main">
    <navigation [menuToggled]="menuToggled"></navigation>

    <section id="content">
        <div class="container">
            <div class="block-header">
                <h2>Header</h2>                    

                <router-outlet></router-outlet>

            </div>
        </div>
    </section>
</section>

<shellfooter></shellfooter>

Main layout component code:

@Component({
    templateUrl: "app/shell/main-layout.component.html",
    directives: [ROUTER_DIRECTIVES, NavigationComponent, HeaderComponent, FooterComponent]
})
@RouteConfig([
        { path: "/dashboard/...", name: "Dashboard", component: DashboardComponent, useAsDefault: true }
])
export class MainLayoutComponent {

    public menuToggled: boolean;

    public onMenuToggle(event:boolean) {
        this.menuToggled = event;
    }
}

And in my navigation component, I've got some router links (and no router outlet, only using routerlink directive, no child routes defined):

    <ul class="main-menu">
        <li *ngFor="#navItem of navItems">
            <a [routerLink]="navItem.route">
                <i *ngIf="navItem.icon" class="{{navItem.icon}}"></i>
                {{ navItem.text }}
            </a>
        </li>
    </ul>

Clicking those router links changes the route in the browser, and the outlet in the main component responds to those route changes.

You shouldn't need to have the router-outlet in your nav component. If the routes aren't rendering out to your main component, it's possible that you've not included the required directives in the main component e.g.:

import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";

...

@Component({
    directives: [ROUTER_DIRECTIVES, ...]
})

Plunker: https://plnkr.co/edit/P6Bkwy?p=info

Further info: https://angular.io/docs/ts/latest/guide/router.html

Answer 2

It seams that you need Component router, consider this Code and Plunker:

@RouteConfig([
  { name: "Home", component: HomeCMP, path: "/home", useAsDefault: true},
  { name: "Videos", component: VideosCMP, path: "/videos/..."}
])

Than, in VideosCMP

@Component({
  selector: 'videos',
  template : `<router-outlet></router-outlet>`,
  directives: [RouterOutlet]
})
@RouteConfig([
  { name: "VideoList" component: VideListCMP, path: "/", useAsDefault: true}
])
export class VideosCMP {}

Full example: https://plnkr.co/edit/3dnBZEDhpGvVO5aQQswA?p=preview

Answer 3

<router-outlet> can be named and aux-routes add components to named `.

This Plunker from Brandon Roberts demonstrates it

in src/app.ts is an unamed <router-outlet> (main) for the normal route and several named <router-outlet name="chat"></router-outlet>.

In @RouteConfig the AuxRoutes are assigned to outlets by the path:.

AuxRoutes are still limited.
If this is not what you need @VladoTesanovic 's answer is probably the right way for you.

See Angular2 router in one component for information about the syntax in the new RC.3 router.