Angular2和SystemJS子路由访问错误
Angular 2 and SystemJS child route access error
我有一个 angular 2 的应用程序有这条路线:
export const MODULE_ROUTES: Route[] =[
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'user', component: UserComponent, canActivate: [AuthGuard] },
{ path: 'table', component: TableComponent, canActivate: [AuthGuard] },
{ path: 'icons', component: IconsComponent, canActivate: [AuthGuard] },
{ path: 'notifications', component: NotificationsComponent, canActivate: [AuthGuard] },
{ path: 'typography', component: TypographyComponent, canActivate: [AuthGuard] },
{ path: 'maps', component: MapsComponent, canActivate: [AuthGuard] },
{ path: 'upgrade', component: UpgradeComponent, canActivate: [AuthGuard] },
{ path: 'calendar', component: CalendarComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'unauthorized', component: UnauthorizedComponent },
{ path: 'adminarea',component: AdminareaComponent, canActivate: [AuthGuard],
children: [
{
path:'test1', component: CalendarComponent
}
] },
{ path: '**', component: DashboardComponent }
]
我的 index.html 文件中有 <base href='/'
>。另外,我的组件上也有 <router-outlet>
标签。
如果我放在浏览器上:
http://localhost:8000/adminarea
或http://localhost:8000/dashboard
页面和路由正常显示。但是,如果我输入 http://localhost:8000/adminarea/test1
,那么页面就会因奇怪的错误而损坏:
如果我将任何父级的任何子路由(或子级)放在我的浏览器地址栏中,则会出现同样的错误和行为。例如:
http://localhost:8000/dashboard/xyz
但是如果我有 { path: '**', component: DashboardComponent }
不应该重定向到我的 DashboardComponent(如果是 404 路由)?为什么我的子路由 'test1' 不起作用?
你能帮帮我吗?
问题是名为 child <router-outlet>
.
在我的 child 组件上,我有一个命名的路由器插座 <router-outlet name="adminarea"></router-outlet>
。 我删除了 "name",现在一切正常。但是我不明白为什么。
我有一个 angular 2 的应用程序有这条路线:
export const MODULE_ROUTES: Route[] =[
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'user', component: UserComponent, canActivate: [AuthGuard] },
{ path: 'table', component: TableComponent, canActivate: [AuthGuard] },
{ path: 'icons', component: IconsComponent, canActivate: [AuthGuard] },
{ path: 'notifications', component: NotificationsComponent, canActivate: [AuthGuard] },
{ path: 'typography', component: TypographyComponent, canActivate: [AuthGuard] },
{ path: 'maps', component: MapsComponent, canActivate: [AuthGuard] },
{ path: 'upgrade', component: UpgradeComponent, canActivate: [AuthGuard] },
{ path: 'calendar', component: CalendarComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'unauthorized', component: UnauthorizedComponent },
{ path: 'adminarea',component: AdminareaComponent, canActivate: [AuthGuard],
children: [
{
path:'test1', component: CalendarComponent
}
] },
{ path: '**', component: DashboardComponent }
]
我的 index.html 文件中有 <base href='/'
>。另外,我的组件上也有 <router-outlet>
标签。
如果我放在浏览器上:
http://localhost:8000/adminarea
或http://localhost:8000/dashboard
页面和路由正常显示。但是,如果我输入 http://localhost:8000/adminarea/test1
,那么页面就会因奇怪的错误而损坏:
如果我将任何父级的任何子路由(或子级)放在我的浏览器地址栏中,则会出现同样的错误和行为。例如:
http://localhost:8000/dashboard/xyz
但是如果我有 { path: '**', component: DashboardComponent }
不应该重定向到我的 DashboardComponent(如果是 404 路由)?为什么我的子路由 'test1' 不起作用?
你能帮帮我吗?
问题是名为 child <router-outlet>
.
在我的 child 组件上,我有一个命名的路由器插座 <router-outlet name="adminarea"></router-outlet>
。 我删除了 "name",现在一切正常。但是我不明白为什么。