child-router 的 Angular2 路由器不工作

Question

我正在努力让我的 child-router 正常工作。目标是制作一种像 website 这样的 navigation-bar。所以我们有一个包含所有主要选项卡的路由器，每个选项卡都有自己的导航到其相应视图或组件的路由器。

但我收到以下错误：

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{


}

关于在最新版本的 Angular2 上找到的文档，很多事情都没有像孩子那样解释 {path: '/parent/...', name: 'Parent', component: ParentComponent}

Answer 1

我要在这里说的几点太长了评论所以发布作为答案。

无需像您在问题中那样在指令列表中提供 RouterOutlet。因为根据官员 RouterLink 和 router-outlet 的说法，当我们在指令列表中注入 ROUTER_DIRECTIVES 时包括在内。
这里是关于子路由的解释，你要找。 https://angular.io/docs/ts/latest/cheatsheet.html （在路由和导航部分。）
我遇到了同样的错误，但我已经解决了这个问题，如下所示：

当我这样写代码的时候

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

它显示抛出与您遇到的相同的错误，但在搜索后我发现错误在我的 routeConfig 的 Component 属性中，即 angular2 认为我们在 routeConfig 中写了一个 Component 注释，但它只接受一个 loader、component、redirectto (URL)属性。但是我们已经写了别的东西，所以当我用组件代码更改组件时工作正常。

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

上一行使我的代码工作。它可能无助于解决您的问题，因为您已经编写了 Component 的组件，但我已将其发布给其他人，可能会对其他人有所帮助，谢谢。

同

child-router 的 Angular2 路由器不工作

Angular2 router with child-router not working

angular

angular2-routing