Choose which router-output should be used to display the contents of the route.

Question

I have a component nav, which is a menu that processes the routing bit, the problem is that I can not show the contents of the routes, because I do not have router-outleta component in the template nav.

Instead, I would like to display the contents of the route in the main component of the application core, but how can I tell angular to use router-outletin my corecomponent, and not in my navcomponent?

Since mine [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>

He does not want to display the route in the component core:

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>

, , , , , core.

?

, router-outlet nav.

Answer 1

, , :

<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>

:

@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;
    }
}

( , routerlink, ):

    <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>

, .

- . , , , :

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

...

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

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

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

Answer 2

, , :

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

VideoCMP

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

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

Answer 3

<router-outlet> aux-routes named..

Plunker Brandon Roberts

src/app.ts <router-outlet> () <router-outlet name="chat"></router-outlet>.

B @RouteConfig AuxRouteare assigned to pins with 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 syntax information in the new RC router. 3.