路由路由角2

Question

如何在使用角度2（RC-5）， enter image description here

app.html

<nav> 
    <a routerLink="/developers" routerLinkActive="active">Developers</a> 
    <a routerLink="/customers" routerLinkActive="active">Customers</a> 
</nav> 
<div class="container"> 
    <div class="row"> 
    <router-outlet></router-outlet> 
    </div> 

和 developer.html
路由做路由*** *代碼**

<a routerLink="/link1">link1</a> 
<a routerLink="/link2" routerLinkActive="active">link2</a> 
<router-outlet></router-outlet> 

問題，這兩個鏈接（link1和link2）重定向到主要路由器outleet

Answer 1

你必須給一個不同的名稱，第二個節點路由器出口

//developer.html

<a routerLink="/link1">link1</a> 
<a routerLink="/link2" routerLinkActive="active">link2</a> 
<router-outlet name="auxPathName"></router-outlet> 

而在路由的配置包括：auxPathName

這裏說明如何添加多個路由器插座節點： https://stackoverflow.com/a/34642273/896258

---

這是我的工作實施例（Angular2 RC5，路由器3-RC1）一個路由器出口節點僅。

HTML文件

<ul> 
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="events">All Events</a></li> 
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="events/news">News</a></li> 
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="events/family">Family Events</a></li> 
    <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="events/wedding">Wedding Events</a></li> 
    </ul> 
</div> 

app.routing文件

import { Routes, RouterModule } from '@angular/router'; 

import { EventsComponent } from './events/events.component'; 
import { EventDetailsComponent } from './eventdetails/eventdetails.component'; 

const appRoutes: Routes = [ 
    { path: 'events', component: EventsComponent }, 
    { path: 'events/:type', component: EventsComponent }, 
    { path: 'events/:id/detail', component: EventDetailsComponent }, 
    { path: '', redirectTo: 'events', pathMatch: 'full' }, 
    // { path: '**', component: PageNotFoundComponent }//TODO: this should redirect to PageNotFound 
]; 

export const appRoutingProviders: any[] = []; 

export const routing = RouterModule.forRoot(appRoutes);