[英]Angular2 Routing - Child template not dispalying
I am trying to learn angular 2 routing and I am stuck here I can't get the template of child component to display. 我正在尝试学习角度2路由,但被困在这里,我无法显示子组件的模板。 I have the following two pages
我有以下两页
page1.ts page1.ts
import {Component} from 'angular2/core';
@Component({
selector: "page1",
template: `page 1 goes here.`
})
export class Page1Cmp{}
page2.ts 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{}
Here is the child component that page2.ts is trying to route 这是page2.ts尝试路由的子组件
child.ts 孩子
import {Component} from 'angular2/core';
@Component({
selector: "child",
template: `child content goes here.`
})
export class ChildCmp{}
This child component is not being displayed on page2 Here is the root component 该子组件未在第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
]);
When I route to page2 I don't see the template of child.ts component. 当我转到page2时,看不到child.ts组件的模板。 I re-produced the problem on plunker here
我在这里重现了问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.