布线角度2中的布线

Question

如何使用angular 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 )重定向到主路由器外网时出现问题

Answer 1

您必须为第二个节点路由器-outlet指定一个不同的名称

//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，router 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);