Angular 2 和 SystemJS 子路由访问错误答案

【问题标题】：Angular 2 and SystemJS child route access errorAngular 2 和 SystemJS 子路由访问错误
【发布时间】：2017-04-22 13:04:04
【问题描述】：

我有一个 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”不起作用？

你能帮帮我吗？

【问题讨论】：

标签： javascript angular angular2-routing systemjs

【解决方案1】：

问题是被命名的孩子<router-outlet>。

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

【讨论】：