angular2 RC1 一些路由器没有提供者
angular2 RC1 Some Routers have no Provider
从测试版升级到 RC1 后,我在路由方面遇到了一些问题。一些路线工作正常,而其他路线给我以下异常:
Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for Router!
ORIGINAL STACKTRACE:
Error: DI Exception
这是我的 app.component.ts:
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
encapsulation: ViewEncapsulation.None,
directives: [ROUTER_DIRECTIVES, DROPDOWN_DIRECTIVES, RouterOutlet],
providers: [
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
StudentService,
ReportService,
UserService,
ClassService,
PropertiesService
]
})
@Routes([
{ // child route
path: '/admin/...',
name: 'Admin',
component: AdministratorComponent
},
{ path: '*', name: 'Home', component: HomeComponent },
{ path: '/filter', name: 'Filter', component: FilterComponent },
{ path: '/profile', name: 'Profile', component: ProfileComponent },
{ path: '/credits', name: 'Credits', component: ReportComponent},
{ path: '/approve', name: 'Approve', component: ApproveComponent},
{ path: '/filter-class', name: 'FilterClass', component: FilterClassComponent},
{ path: '/class', name: 'Class', component: ClassComponent}
])
这是具有子路由
的administrator.component.ts
@Component({
selector: 'my-administrator',
templateUrl: 'app/components/administrator/administrator.component.html',
//styleUrls: ['app/administrator.component.css'],
encapsulation: ViewEncapsulation.None,
directives: [RouterOutlet, ROUTER_DIRECTIVES],
providers: []
})
@Routes([
{path: '/profile/:id', name: 'Profile', component: ProfileComponent},
{path: '/approve/:id', name: 'Approve', component: ApproveComponent},
{path: '/filter', name: 'Filter', component: FilterComponent},
{path: '/filter-class', name: 'FilterClass', component: FilterClassComponent},
{path: '/class/:id', name: 'Class', component: ClassComponent},
])
我在下面添加了 html:
<a class="list-group-item" href="javascript:void(0)" [routerLink]="['Home']">Home</a>
路由工程^
<a class="list-group-item" *ngIf="user.isAdmin" [class.active]="getLinkStyle('/admin/')" href="javascript:void(0)" [routerLink]="['Admin', 'Filter']">Student Management<span class="sr-only">(current)</span></a>
路由不起作用^
<a class="list-group-item" *ngIf="!user.isAdmin" [class.active]="getLinkStyle('/profile')" href="javascript:void(0)" [routerLink]="['Profile',{id: userConst.user.studentId}]">My Profile</a>
路由有效 ^
<a class="list-group-item" *ngIf="!user.isAdmin" [class.active]="getLinkStyle('/credits')" href="javascript:void(0)" [routerLink]="['Credits']">My Credits</a>
路由有效 ^
<a class="list-group-item" *ngIf="user.isAdmin" [class.active]="getLinkStyle('/filter-class')" href="javascript:void(0)" [routerLink]="['FilterClass']">Class Management</a>
路由不起作用^
- 不要在每个组件上添加
ROUTER_PROVIDERS
,只在根组件上添加一次。
/...
路径:'/admin/...'
,因为子路由在 rc.x 中对我不起作用。尝试删除 /...
- 新路由器中的路由没有
name
。只有path
和component
(其他计划中)
- 对于新路由器,
[routerLink]
s 获取路径段列表,而不是名称
[routerLink]="['/admin', 'filter']
或 [routerLink]="['Admin/Filter']
从测试版升级到 RC1 后,我在路由方面遇到了一些问题。一些路线工作正常,而其他路线给我以下异常:
Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for Router!
ORIGINAL STACKTRACE:
Error: DI Exception
这是我的 app.component.ts:
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
encapsulation: ViewEncapsulation.None,
directives: [ROUTER_DIRECTIVES, DROPDOWN_DIRECTIVES, RouterOutlet],
providers: [
HTTP_PROVIDERS,
ROUTER_PROVIDERS,
StudentService,
ReportService,
UserService,
ClassService,
PropertiesService
]
})
@Routes([
{ // child route
path: '/admin/...',
name: 'Admin',
component: AdministratorComponent
},
{ path: '*', name: 'Home', component: HomeComponent },
{ path: '/filter', name: 'Filter', component: FilterComponent },
{ path: '/profile', name: 'Profile', component: ProfileComponent },
{ path: '/credits', name: 'Credits', component: ReportComponent},
{ path: '/approve', name: 'Approve', component: ApproveComponent},
{ path: '/filter-class', name: 'FilterClass', component: FilterClassComponent},
{ path: '/class', name: 'Class', component: ClassComponent}
])
这是具有子路由
的administrator.component.ts@Component({
selector: 'my-administrator',
templateUrl: 'app/components/administrator/administrator.component.html',
//styleUrls: ['app/administrator.component.css'],
encapsulation: ViewEncapsulation.None,
directives: [RouterOutlet, ROUTER_DIRECTIVES],
providers: []
})
@Routes([
{path: '/profile/:id', name: 'Profile', component: ProfileComponent},
{path: '/approve/:id', name: 'Approve', component: ApproveComponent},
{path: '/filter', name: 'Filter', component: FilterComponent},
{path: '/filter-class', name: 'FilterClass', component: FilterClassComponent},
{path: '/class/:id', name: 'Class', component: ClassComponent},
])
我在下面添加了 html:
<a class="list-group-item" href="javascript:void(0)" [routerLink]="['Home']">Home</a>
路由工程^
<a class="list-group-item" *ngIf="user.isAdmin" [class.active]="getLinkStyle('/admin/')" href="javascript:void(0)" [routerLink]="['Admin', 'Filter']">Student Management<span class="sr-only">(current)</span></a>
路由不起作用^
<a class="list-group-item" *ngIf="!user.isAdmin" [class.active]="getLinkStyle('/profile')" href="javascript:void(0)" [routerLink]="['Profile',{id: userConst.user.studentId}]">My Profile</a>
路由有效 ^
<a class="list-group-item" *ngIf="!user.isAdmin" [class.active]="getLinkStyle('/credits')" href="javascript:void(0)" [routerLink]="['Credits']">My Credits</a>
路由有效 ^
<a class="list-group-item" *ngIf="user.isAdmin" [class.active]="getLinkStyle('/filter-class')" href="javascript:void(0)" [routerLink]="['FilterClass']">Class Management</a>
路由不起作用^
- 不要在每个组件上添加
ROUTER_PROVIDERS
,只在根组件上添加一次。 /...
路径:'/admin/...'
,因为子路由在 rc.x 中对我不起作用。尝试删除/...
- 新路由器中的路由没有
name
。只有path
和component
(其他计划中) - 对于新路由器,
[routerLink]
s 获取路径段列表,而不是名称[routerLink]="['/admin', 'filter']
或[routerLink]="['Admin/Filter']