[Angular 2] Child Router

Benefit to, Router is ANGUALR 2 then can-lazy load the component on demand.

Define a child router by adding three dots '/characters/... ':

@RouteConfig ([  '/characters/ ... ' ' characters ' true },  '/vehicles/ ... ' ' Vehicles ' , component:vehiclescomponent}])

So both ' characters ' and ' vehicles ' component container child router.

Then on each component, we define it child Rotuer

Import {Component} from 'Angular2/core'; import {routeconfig, router_directives} from 'Angular2/router'; import {charactercomponent} from './character.component'; import {characterlistcomponent} from './character-list.component'; import {Characterservice} from './character.service'; @Component ({selector:'Story-characters-root', Template: '<router-outlet></router-outlet>', directives: [Router_directives]}) @RouteConfig ([{path:'/', Name:'characters', Component:characterlistcomponent, Useasdefault:true}, {path:'/:id', Name:'Character', component:charactercomponent}]) ExportclassCharacterscomponent {}

Import {Component, OnInit} from 'Angular2/core'; import {routeconfig, router_directives} from 'Angular2/router'; import {vehiclelistcomponent} from './vehicle-list.component'; import {vehiclecomponent} from './vehicle.component'; import {Vehicleservice} from './vehicle.service'; @Component ({selector:'Story-vehicles-root', Template: '<router-outlet></router-outlet>', directives: [Router_directives], providers: [Vehicleservice]}) @RouteConfig ([{path:'/', Name:'Vehicles', Component:vehiclelistcomponent, Useasdefault:true}, {path:'/:id', Name:'Vehicle', component:vehiclecomponent}]) ExportclassVehiclescomponent {}

----------------

The list component, set Routerlink:

<ulclass= "Characters">    <Li*ngfor= "#character of characters | async">      <ahref=""[Routerlink]= "[' Character ', {id:character.id}]">{{ character.id}}. {{character.name} }</a>    </Li>  </ul>

[Angular 2] Child Router