Le routeur Angular2 avec l'enfant-routeur ne fonctionne pas

Question

J'essaye de faire fonctionner mon enfant-routeur. Le but est de faire une sorte de barre de navigation comme dans cette website. Nous avons donc un routeur qui contient tous les onglets principaux, et chaque onglet a ses propres routeurs qui naviguent vers sa vue ou son composant correspondant.

Pourtant, je reçois l'erreur suivante:

EXCEPTION: Error during instantiation of Router! (RouterLink -> Router). 
ORIGINAL EXCEPTION: Route config should contain exactly one "component", "loader", or "redirectTo" property. 

/app/game/organisation/organisation-list.component.ts

import {Component} from "angular2/core"; 
import {RouteConfig,ROUTER_DIRECTIVES, RouterOutlet} from 'angular2/router'; 
import {Theme} from "../theme/theme"; 
import {Router,RouteParams} from "angular2/router"; 
import {OrganisationService} from "./organisation.service"; 
import {Organisation} from "./organisation"; 
import {OrganisationComponent} from "./organisation.component"; 
import {ThemeComponent} from "../theme/theme.component"; 

@Component({ 
    template: ` 
<div class="container"> 
    <ul> 
    <li *ngFor="#organisation of organisations"> 
     <a [routerLink]="['OrganisationList','Organisation',{organisationId: organisation.organisationId}]">Organisation naam</a> 
    </li> 
    </ul> 
</div> 
<router-outlet></router-outlet> 
    `, 
    directives: [RouterOutlet, ROUTER_DIRECTIVES], 
}) 

@RouteConfig([ 
    {path: '/:organisationId/theme/...', name: 'Organisation', component: OrganisationComponent}, 
    // {path: '/:organisationId/theme/...', name: 'Theme', component: ThemeComponent}, 
]) 

export class OrganisationListComponent { 
    public organisations:Organisation[]; 

    constructor(private routeParams:RouteParams, 
       private router:Router, 
       private organisationService:OrganisationService) { 
     this.organisationService.getOrganisations().subscribe((organisations:Organisation[])=> { 
      this.organisations = organisations; 
     }); 
    } 
} 

/app/app.component.ts

/** 
* Created by J.P on 26/02/2016. 
*/ 
import {Component} from 'angular2/core'; 
import {RouteConfig,ROUTER_DIRECTIVES} from "angular2/router"; 
import {CardListComponent} from "./game/card/card-list.component"; 
import {NewThemeComponent} from "./game/theme/new-theme.component"; 
import {CardService} from "./game/card/card.service"; 
import {CircleComponent} from "./game/circle/circle.component"; 
import {ThemeService} from "./game/theme/theme.service"; 
import {OrganisationService} from "./game/organisation/organisation.service"; 
import {Organisation} from "./game/organisation/organisation"; 
import {Router} from "angular2/router"; 
import {OrganisationComponent} from "./game/organisation/organisation.component"; 
import {ThemeComponent} from "./game/theme/theme.component"; 
import {OrganisationListComponent} from "./game/organisation/organisation-list.component"; 
import {LandingPageComponent} from "./game/landing-page.component"; 
import {UserService} from "./game/user/user.service"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <a [routerLink]="['CardList']">CardList </a> | 
    <a [routerLink]="['Circle']">Circle 1 </a> | 
    <a [routerLink]="['Theme']">Create Theme</a> 
    <router-outlet></router-outlet> 
    `, 
    directives:[ROUTER_DIRECTIVES], 
    providers:[CardService,ThemeService,OrganisationService,UserService] 
}) 
@RouteConfig([ 
    {path: '/', redirectTo:['/LandingPage']}, 
    {path: '/landing', name: 'LandingPage', component: LandingPageComponent, useAsDefault: true}, 
    // {path: '/organisation', name: 'Home', component: AppComponent, useAsDefault: true}, 
    {path: '/organisation/...', name: 'OrganisationList', component: OrganisationListComponent}, 
    {path: '/card-list', name:'CardList', component:CardListComponent}, 
    {path: '/circle/1', name:'Circle', component:CircleComponent}, 
    {path: '/theme', name:'Theme', component:NewThemeComponent} 
]) 
export class AppComponent{ 


} 

également sur la documentation trouvée sur les dernières versions de Angular2 beaucoup de choses ne sont pas expliquées comme les Childs par exemple {path: '/parent/...', name: 'Parent', component: ParentComponent}

Answer 1

quelques points que je dois dire ici trop longtemps pour poster un commentaire afin de réponse.

1. Pas besoin de fournir RouterOutlet dans la liste des directives que vous avez fait dans la question. parce que selon les fonctionnaires RouterLink et router-outlet et inclus lorsque nous injectons ROUTER_DIRECTIVES dans la liste des directives.

2. Voici une explication sur le routage enfant que vous recherchez. https://angular.io/docs/ts/latest/cheatsheet.html (dans la section de routage et de navigation.)

3. même erreur i avait fait face, mais j'ai résolu cela comme ci-dessous:

quand j'écrire le code comme celui-ci

{ path: '/formDemo', Component: FormDemo, name: "FormDemo"} 

il montre jette la même erreur que vous avez rencontré, mais après la recherche, j'ai trouvé l'erreur est dans mon attribut Component de routeConfig c.-à-d. Angular2 pense que nous avons écrit une annotation Component dans le routeConfig mais il acc ept seulement exactement une propriété loader, component, redirectto (URL). mais nous avons écrit autre chose, donc quand j'ai changé de composant avec le code de composant fonctionne très bien.

{ path: '/formDemo', component: FormDemo, name: "FormDemo"} 

La ligne ci-dessus fait fonctionner mon code. Il ne peut pas aider à résoudre votre problème parce que vous avez déjà écrit le composant insted de Component mais j'ai posté ceci pour d'autres peut-être cela aidera quelqu'un d'autre merci.

même que https://stackoverflow.com/a/34349420/5043867