2016-04-27 12 views
2

Ich versuche, ein einfaches Routing von einer untergeordneten Komponente zu einem anderen Kind Bestandteil einer übergeordneten Komponente zu tun. router-outlet ist in der übergeordneten Komponente definiert. Hier ist, wie ich versuche, dies zu erreichen:Angular 2 - Routing von der `ersten child` Komponente auf einen` zweiten child` Bestandteil einer übergeordnete Komponente

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

Wenn der Benutzer klickt Go to second child möchte ich die Vorlage des zweiten Kindes Komponente zeigen. Aber ich bin immer folgende Fehlermeldung:

Component "FirstChildCmp" has no route config.

Aber ich will nicht Konfiguration definieren, in FirstChildCmp stattdessen möchte ich Eltern Konfiguration verwenden. Ich habe wieder hergestellt, das Problem auf plunker here

Antwort

3

FirstChild.ts Plnkr

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

In ['SecondChild'] Sie Zitate verpasst. Es muss eine Zeichenfolge sein.

Verwandte Themen