在RC6中带有孩子的Angular2路线

时间:2016-09-06 11:42:28

标签: angular angular2-routing

我是Angular2的新手,我试图在我的应用中添加一些路线。我有两个独立的路由文件:

app.routing.ts

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: LoginComponent
  },
  {
    path: '**', component: My404Component
  }
];


export const routing = RouterModule.forRoot(appRoutes);

和dashboard.routing.ts

const appRoutes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
      },

    ],
    canActivate: [AuthGuard],
  }
];


export const dashboardRouting: ModuleWithProviders = RouterModule.forChild(appRoutes);

如果我访问http://localhost:3000/dashboard我收到并且有404页错误,但如果我访问http://localhost:3000/dashboard/child,我就会看到该页面。

如果我删除了信息中心内的children属性,我可以访问http://localhost:3000/dashboard并查看该页面...

我做错了什么?

1 个答案:

答案 0 :(得分:1)

const appRoutes: Routes = [
  { path: '', pathMatch: 'full',  component: LoginComponent }, // order matters
  { path: 'login', component: LoginComponent },
  { path: '**', component: My404Component }
];

也为子路线添加默认路线:

const appRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard], children: [
      { path: '', redirectTo: 'child', pathMatch: 'full' },
      { path: 'child', component: ChildComponent, },
  ],
  }
];