nested routing in angular2 not working - angular2-routing

Question

How to manage nested link in angular2.
for eg. I have two file :
app.component.ts
import { Component, forwardRef } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';
import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
import { HeroesComponent } from './heroes.component';
import { TestComponent } from './test.component';
import { HeroDetailComponent } from './hero-detail.component';
import { LinkComponent } from './link.ts'
#Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<link111></link111>
<router-outlet></router-outlet>
`,
styleUrls: ['app/app.component.css'],
directives: [ROUTER_DIRECTIVES, forwardRef(() => LinkComponent)],
providers: [
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
HeroService
]
})
#RouteConfig([
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
},
{
path: '/detail/:id',
name: 'HeroDetail',
component: HeroDetailComponent
},
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
},
{
path: '/test',
name: 'Test',
component: TestComponent
}
])
export class AppComponent {
title = 'Tour of Heroes';
}
link.ts
import {Component} from 'angular2/core';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
#Component({
selector:'link111',
template:`
<nav>
<a [routerLink]="['Dashboard']">Dashboard</a>
<a [routerLink]="['Heroes']">Heroes</a>
<a [routerLink]="['Test']">Test</a>
</nav>
`,
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
export class LinkComponent {
}
When [routerLink] define in app.component.ts in place of link111 tag it works, but when i separate it into different file it doesn't work.
please help me, Thanks.

Answer 1

When [routerLink] define in app.component.ts in place of link111 tag it works, because angular look routing from the
main root file(that is app.ts in your case), but when you separate it into different file it doesn't work because
than routing is defined in the root file but you are calling from childern (i.e not from parent). so to resolve this
change this like this -
<a [routerLink]="['./Dashboard']">Dashboard</a>
<a [routerLink]="['./Heroes']">Heroes</a>
<a [routerLink]="['./Test']">Test</a>
because If the route begins with ./, the router will look up the current components childern route from the root of the app.
From officials -
The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.
for more info refer this -
https://angular.io/docs/ts/latest/api/router/RouterLink-directive.html
How to use child routes in Angular 2.
Angular 2 router examples + #RouteConfig typing support