Angular 2子子路线

时间:2016-09-01 19:18:24

标签: angular typescript angular2-routing

我一直在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]

0 个答案:

没有答案