Angular 2和SystemJS子路由访问错误

时间:2017-04-22 13:04:05

标签: javascript angular angular2-routing systemjs

我有一个带有这条路线的角度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 }

]

我有<base href='/'&gt;在我的 index.html 文件中。另外,我的组件上也有<router-outlet>标签。

如果我放在浏览器上:

http://localhost:8000/adminareahttp://localhost:8000/dashboard页面和路线正常显示。但是,如果我放http://localhost:8000/adminarea/test1,那么页面会被错误的错误打破:

enter image description here

如果我在浏览器地址栏上放置任何父级的子路由(或子级),则会出现同样的错误和行为。例如:

http://localhost:8000/dashboard/xyz

但是,如果我{ path: '**', component: DashboardComponent }不应该重定向到我的DashboardComponent(如果是404路由)?为什么我的孩子路线'test1'不起作用?

你能帮帮我吗?

1 个答案:

答案 0 :(得分:0)

问题是指定的孩子<router-outlet>

在我的子组件上,我有一个命名路由器插座<router-outlet name="adminarea"></router-outlet>我删除了&#34;名称&#34; ,现在一切正常。但我不明白为什么。