2016-03-23 17 views
0

Açısal 2 yöneltmeyi öğrenmeye çalışıyorum ve burada sıkışıp kaldım Çocuk bileşen şablonunu görüntüleyemiyorum. Ben page2.ts çocuk bileşeni rota çalışıyor edilirAngular2 Yönlendirme - Şablonu devre dışı bırakmayan şablon

page1.ts

import {Component} from 'angular2/core'; 

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

page2.ts İşte

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{} 

aşağıdaki iki sayfa var

child.ts

import {Component} from 'angular2/core'; 

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

Bu çocuk bileşeni İşte Sayfa2'ye gösterilmiyor I rota I şablonunu görmüyorum Sayfa2'ye zaman

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 
]); 

app.ts kök bileşenidir child.ts bileşeni. Ben plunker here

cevap

0

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>` 
}) 
sorunu üretilen yeniden
İlgili konular