Question

我正试图让我的孩子路由器工作。我们的目标是制作一种类似于website的导航栏。所以我们有一个包含所有主要选项卡的路由器，每个选项卡都有自己的路由器，可以导航到相应的视图或组件。

然而我收到以下错误：

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注释但是它只接受一个加载器，组件，redirectto（URL ）财产。但我们已经写了别的东西，所以当我用组件代码更改组件时工作正常。

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

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

与https://stackoverflow.com/a/34349420/5043867

带子路由器的Angular2路由器无法正常工作

1 个答案: