Angular2路由器與子路由器不工作

我想讓我的子路由器工作。目標是製作一種像這樣的導航欄website。因此，我們有一個包含所有主標籤的路由器，每個標籤都有自己的路由器，可以導航到相應的視圖或組件。Angular2路由器與子路由器不工作

然而，我得到以下錯誤：

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

來源

2016-03-04 Edward

你是如何解決這個問題的？ – user2180794

幾個點我要告訴這裏太朗對此事發表評論，以便發佈爲答案。

無需在指令列表中提供RouterOutlet，就像您在問題中所做的一樣。因爲根據官員RouterLink和router-outlet和包括當我們注入ROUTER_DIRECTIVES在指令列表。
這是關於兒童路由的說明，您正在尋找。 https://angular.io/docs/ts/latest/cheatsheet.html （在路由和導航部分。）
同樣的錯誤我已經面臨但未在此，如下解決：

當我寫這樣

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

代碼

它顯示了你遇到的同樣的錯誤，但搜索後我發現錯誤是在我的組件屬性routeConfig即angular2認爲我們已經寫了一個組件註釋在routeConfig但它acc ept只有一個加載器，組件，redirectto（URL）屬性。但我們已經寫了別的東西，所以當我改變與組件代碼的Component工作正常。

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

上面的行使我的代碼工作。它可能無助於解決您的問題，因爲您已經編寫了Component的組件，但是我已經爲其他人發佈了它，可能會對其他人有所幫助。

相同https://stackoverflow.com/a/34349420/5043867

來源

2016-03-04 17:41:22

Angular2路由器與子路由器不工作

回答

相關問題