[Angular 2] Child Router

Benefit to use child router is Angualr 2 then can lazy load the component on demand. 

 

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

@RouteConfig([
  { path: '/characters/...', name: 'Characters', component: CharactersComponent, useAsDefault: true },
  { path: '/vehicles/...', name: 'Vehicles', component: VehiclesComponent }
])

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

 

Then in each component, we define its 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 }
])
export class CharactersComponent { }

 

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 }
])
export class VehiclesComponent { }

 

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

The list component, set routerLink:

<ul class="characters">
    <li *ngFor="#character of characters | async">
      <a href="" [routerLink]="['Character', {id: character.id}]">
       {{character.id}}. {{character.name}}
      </a>
    </li>
  </ul>