routing in routing angular 2

Question

how to do routing in routing using 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>

and developer.html
****code**

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

problem that this two link(link1 and link2 ) redirect to main router outleet

score 0 · Answer 1 · edited May 23 '17 at 11:46

You have to give a different name for second node router-outlet

//developer.html

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

And at Routing configuration include the auxPathName

Here explains how to add multiple router-outlet nodes : https://stackoverflow.com/a/34642273/896258

Here is my working example (Angular2 RC5, router 3-rc1) one router-outlet node only.

HTML file

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

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

routing in routing angular 2

1 Answers1