2016-04-27 42 views
2

我試圖做一個從子組件到父組件的另一個子組件的簡單路由。在父組件中定義了router-outlet。這裏是我想實現這一點:Angular 2 - 從父組件的「第一個子組件」到「第二個子組件」的路由

parent.ts

import {Component} from 'angular2/core'; 
import {RouteConfig,ROUTER_PROVIDERS,ROUTER_DIRECTIVES} from 'angular2/router'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {FirstChildCmp} from "./first_child"; 
import {SecondChildCmp} from "./second_child"; 

@Component({ 
    selector: 'app', 
    template: ` 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    {path: '/first_child', component: FirstChildCmp, name: 'FirstChild', useAsDefault:true}, 
    {path: '/second_child',component: SecondChildCmp, name:'SecondChild'} 
]) 
export class ParentCmp{} 

bootstrap(ParentCmp,[ 
    ROUTER_PROVIDERS 
]); 

first_child.ts

import {Component} from 'angular2/core'; 
import {ROUTER_DIRECTIVES} from 'angular2/router'; 

@Component({ 
    selector: 'child', 
    template: ` 
    <a [routerLink]="[SecondChild]">Go to second child</a> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class FirstChildCmp{} 

second_child.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'child', 
    template: ` 
    This is second child. 
    ` 
}) 
export class SecondChildCmp{} 

當用戶點擊Go to second child我想顯示第二個子組件的模板。不過,我收到以下錯誤:

Component "FirstChildCmp" has no route config.

但我不想在FirstChildCmp定義配置,而不是我想用父母的配置。我已經重新制作了plunker here

回答

3

FirstChild.ts Plnkr

@Component({ 
    selector: 'child', 
    template: ` 
    <a [routerLink]="['SecondChild']">Go to second child</a> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class FirstChildCmp{} 

['SecondChild']你錯過了引號的問題。它必須是一個字符串。

相關問題