child-states-root.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {ChildStateOneComponent} from "./child-state-one.component";
import {ChildStateTwoComponent} from "./child-state-two.component";

@Component({
    selector: 'child-state-root',
    template : `This is the child state root page
                <nav>
                    <a [routerLink]="['ChildStateOne']">Child State One</a>
                    <a [routerLink]="['ChildStateTwo']">Child State Two</a>
                </nav>
                <router-outlet></router-outlet>`,
    directives : ROUTER_DIRECTIVES
})

@RouteConfig([
    {
        path : '/child-state-one',
        name : 'ChildStateOne',
        component : ChildStateOneComponent,
        useAsDefault : true
    },
    {
        path : '/child-state-two',
        name : 'ChildStateTwo',
        component: ChildStateTwoComponent
    }
])

export class ChildStatesRootComponent {}