我一直在Angular 2中尝试子路由。
以下是路线配置
@RouteConfig([
{ path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true },
{ path: '/vehicles/...', name: 'Vehicles', component: VehiclesComponent },
{ path: '/characters/...', name: 'Characters', component: CharactersComponent },
{ path: '/students/...', name: 'Students', component: StudentsComponent },
{ path: '/feecollection/...', name: 'Feecollection', component:FeeCollectionComponent}
])
export class AppComponent {
public menuItems = [
{ caption: 'Dashboard', link: ['Dashboard'] },
{ caption: 'Characters', link: ['Characters'] },
{ caption: 'Vehicles', link: ['Vehicles'] },
{ caption: 'FKS-Dashboard', link: ['Dashboard'] },
{ caption: 'Students', link: ['Students'] },
{ caption: 'Fees', link: ['Vehicles'] },
{ caption: 'FeeCollection', link: ['Feecollection']}
];
我对FeeCollection组件的其余部分有问题或工作正常。 这是FeeCollection组件
@Component({
selector: 'story-feecollection',
templateUrl: './app/fee/fee-collection.component.html',
providers: [FeeAPIService, ROUTER_PROVIDERS],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/batch', name: 'Batch', component: BatchComponent, useAsDefault:true},
{path: '/bystudent', name: 'Bystudent', component:ByStudentComponent}
])
export class FeeCollectionComponent{}
这是我的收费组件HTML页面
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="" [routerLink]= "['Batch']">Batch</a></li>
<li><a href="" [routerLink]="['Bystudent']">By Student</a></li>
</ul>
</div>
</div>
</nav>
<div>
<div role="tabpanel" class="tab-pane">
<router-outlet></router-outlet>
</div>
</div>
导航到FeeCollection后,我在浏览器控制台中收到以下错误消息
EXCEPTION: Component "AppComponent" has no route named "Batch". in [['Batch'] in FeeCollectionComponent@20:35]