带孩子的Angular 2条路线

Question

I'm trying to create a default route (home) and I want "home" to have childroutes. So that when you go to Home, the homecomponent should load, and when you go to Homes children, a specific childroute should load. But right now my home component loads, but I can't navigate to any of it's children. What am I doing wrong?

This is my core routes:

export const coreRoutes: Routes = [
  { 
    path: '', 
    redirectTo: 'home', 
    pathMatch: 'full' 
  },
  { 
    path: 'home', 
    component: HomeComponent, 
    data: { breadcrumb: 'Home', icon: 'fa-home' }, 
    children: homeChildRoutes 
  }
];

and this is my homeChildRoutes:

export const homeChildRoutes: Routes = [
  { 
    path: '', 
    redirectTo: 'home', 
    pathMatch: 'full' 
  },
  { 
    path: 'first-child', 
    component: firstChildComponent, 
    data: { breadcrumb: 'First Child', parent: 'home' } 
  },
  { 
    path: 'second-child', 
    component: secondChildComponent, 
    data: { breadcrumb: 'Second Child', parent: 'home'  } 
  }
];

Answer 1

When you're on /home page, HomeComponent is shown

When you're on /home/first-child page, firstChildComponent is shown, HomeComponent is hidden

// core routes
export const coreRoutes: Routes = [
  { 
    path: 'home', 
    children: homeChildRoutes
  },
  { 
    path: '', 
    redirectTo: 'home', 
    pathMatch: 'full' 
  },
];

// child routes
export const homeChildRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    data: { breadcrumb: 'Home', icon: 'fa-home' },
  },
  { 
    path: 'first-child', 
    component: firstChildComponent, 
    data: { breadcrumb: 'First Child', parent: 'home' } 
  },
  { 
    path: 'second-child', 
    component: secondChildComponent, 
    data: { breadcrumb: 'Second Child', parent: 'home'  } 
  },
];

Answer 2

Routes can be simplified to this:

export const coreRoutes: Routes = [
  { 
    path: 'home', 
    component: HomeComponent, 
    data: { breadcrumb: 'Home', icon: 'fa-home' }, 
    children: [
      { 
         path: '', 
         redirectTo: 'home', 
         pathMatch: 'full' 
      },
      { 
        path: 'first-child', 
        component: firstChildComponent, 
        data: { breadcrumb: 'First Child', parent: 'home' } 
      },
      { 
        path: 'second-child', 
        component: secondChildComponent, 
        data: { breadcrumb: 'Second Child', parent: 'home'  } 
      }
    ] 
  },
  ,
 { 
    path: '', 
    redirectTo: 'home', 
    pathMatch: 'full' 
 }
];

Make sure your HomeComponent has a router-outlet. Or else your child component will not be visible.

Refer this for code.