Я пытаюсь изучить угловую маршрутизацию 2, и я застрял здесь. Я не могу получить шаблон дочернего компонента для отображения. У меня есть следующие две страницы
page1.ts
import {Component} from 'angular2/core';
@Component({
selector: "page1",
template: 'page 1 goes here.'
})
export class Page1Cmp{}
page2.ts
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{}
Вот дочерний компонент, который пытается запустить page2.ts
child.ts
import {Component} from 'angular2/core';
@Component({
selector: "child",
template: 'child content goes here.'
})
export class ChildCmp{}
Этот дочерний компонент не отображается на стр. 2 Вот корневой компонент
app.ts
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, я не вижу шаблон компонента child.ts. Я перепробовал проблему на plunker здесь
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>'
})