我想讓我的子路由器工作。 目標是製作一種像這樣的導航欄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}
你是如何解決這個問題的? – user2180794