路由路由角2
问题描述:
如何在使用角度2(RC-5), enter image description here路由路由角2
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
答
你必须给一个不同的名称,第二个节点路由器出口
//developer.html
<a routerLink="/link1">link1</a>
<a routerLink="/link2" routerLinkActive="active">link2</a>
<router-outlet name="auxPathName"></router-outlet>
而在路由的配置包括:auxPathName
这里说明如何添加多个路由器插座节点: https://*.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);