Javascript Angular2路由-子模板不显示

我正在尝试学习angular 2布线，我被困在这里，无法显示子组件的模板。我有以下两页

page1.ts

import {Component} from 'angular2/core';

@Component({
    selector: "page1",
    template: `page 1 goes here.`
})
export class Page1Cmp{}

import {Component} from 'angular2/core';
import {RouterLink,RouteConfig} from 'angular2/router';
import {ChildCmp} from './child';

@Component({
    selector: "page2",
    template: `Hello its page 2
    <router-outlet></router-outlet>`
})
@RouteConfig([
    {path: "/", component: ChildCmp, name: "Child", useAsDefault: true}
  ])
export class Page2Cmp{}

import {Component} from 'angular2/core';

@Component({
    selector: "child",
    template: `child content goes here.`
})
export class ChildCmp{}

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from "angular2/router";
import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';

@Component({
    selector: "app",
    template: `<a [routerLink]="['Page1']">Page1</a> | <a [routerLink]="['Page2']">Page2</a>
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/page1", name: "Page1", component: Page1Cmp, useAsDefault: true},
    {path: "/page2/...", name: "Page2", component: Page2Cmp}
])
class MyApp{}

bootstrap(MyApp, [
    ROUTER_PROVIDERS
]);

page2.ts

import {Component} from 'angular2/core';

@Component({
    selector: "page1",
    template: `page 1 goes here.`
})
export class Page1Cmp{}

import {Component} from 'angular2/core';
import {RouterLink,RouteConfig} from 'angular2/router';
import {ChildCmp} from './child';

@Component({
    selector: "page2",
    template: `Hello its page 2
    <router-outlet></router-outlet>`
})
@RouteConfig([
    {path: "/", component: ChildCmp, name: "Child", useAsDefault: true}
  ])
export class Page2Cmp{}

import {Component} from 'angular2/core';

@Component({
    selector: "child",
    template: `child content goes here.`
})
export class ChildCmp{}

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from "angular2/router";
import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';

@Component({
    selector: "app",
    template: `<a [routerLink]="['Page1']">Page1</a> | <a [routerLink]="['Page2']">Page2</a>
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/page1", name: "Page1", component: Page1Cmp, useAsDefault: true},
    {path: "/page2/...", name: "Page2", component: Page2Cmp}
])
class MyApp{}

bootstrap(MyApp, [
    ROUTER_PROVIDERS
]);

此子组件未显示在第2页上 这是根组件

应用程序ts

import {Component} from 'angular2/core';

@Component({
    selector: "page1",
    template: `page 1 goes here.`
})
export class Page1Cmp{}

import {Component} from 'angular2/core';
import {RouterLink,RouteConfig} from 'angular2/router';
import {ChildCmp} from './child';

@Component({
    selector: "page2",
    template: `Hello its page 2
    <router-outlet></router-outlet>`
})
@RouteConfig([
    {path: "/", component: ChildCmp, name: "Child", useAsDefault: true}
  ])
export class Page2Cmp{}

import {Component} from 'angular2/core';

@Component({
    selector: "child",
    template: `child content goes here.`
})
export class ChildCmp{}

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_DIRECTIVES, RouteConfig, ROUTER_PROVIDERS} from "angular2/router";
import {Page1Cmp} from './page1';
import {Page2Cmp} from './page2';

@Component({
    selector: "app",
    template: `<a [routerLink]="['Page1']">Page1</a> | <a [routerLink]="['Page2']">Page2</a>
    <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/page1", name: "Page1", component: Page1Cmp, useAsDefault: true},
    {path: "/page2/...", name: "Page2", component: Page2Cmp}
])
class MyApp{}

bootstrap(MyApp, [
    ROUTER_PROVIDERS
]);

从“angular2/core”导入{Component}；
从“angular2/platform/browser”导入{bootstrap}；
从“angular2/ROUTER”导入{ROUTER_指令、RouteConfig、ROUTER_提供程序}；
从“/page1”导入{Page1Cmp}；
从“/page2”导入{Page2Cmp}；
@组成部分({
选择器：“应用程序”，
模板：`

import {RouterLink,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router'; 

@Component({
    selector: "page2",

    directives: [ROUTER_DIRECTIVES],
    //add this and it will start working as expected.

    template: `<br>Hello its page 2<br>
    <router-outlet></router-outlet>`
})

从“angular2/ROUTER”导入{RouterLink、RouteConfig、ROUTER_指令}；
@组成部分({
选择器：“第2页”，
指令：[路由器指令]，
//添加此项，它将按预期开始工作。
模板：`
你好，第2页

`
})