Angular 2条儿童路线

我正在尝试创建一个默认路由（home），我希望“home”具有子路由。因此，当您回家时，应该加载homecomponent，当您转到Homes children时，应该加载特定的childroute。但是现在我的主组件加载了，但是我无法导航到它的任何子组件。我做错了什么

这是我的核心路线：

export const coreRoutes: Routes = [
  { 
    path: '', 
    redirectTo: 'home', 
    pathMatch: 'full' 
  },
  { 
    path: 'home', 
    component: HomeComponent, 
    data: { breadcrumb: 'Home', icon: 'fa-home' }, 
    children: 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'  } 
  }
];

---

当您在

/home

页面上时，将显示HomeComponent

当您在

/home/first child

页面上时，将显示firstChildComponent，HomeComponent将隐藏

// 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'  } 
  },
];

---

当您在

/home

页面上时，将显示HomeComponent

当您在

/home/first child

页面上时，将显示firstChildComponent，HomeComponent将隐藏

// 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'  } 
  },
];

---

路线可以简化为：

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' 
 }
];

确保HomeComponent具有路由器插座。否则您的子组件将不可见。

---

参考代码。

路线可以简化为：

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' 
 }
];

确保HomeComponent具有路由器插座。否则您的子组件将不可见。

---

请参阅代码。

是否要在同一路由器出口中呈现HomeComponent和ChildComponent？了解子路由在父组件的路由器出口中呈现子组件的内容非常重要。你想实现什么？我想是的，我对Angular很陌生，但我想实现的是在导航到根目录时显示homecomponent，其中包含一些内容。然后当您导航到它的子节点时，子节点的内容应该是可见的。是否要在同一路由器出口中呈现HomeComponent和ChildComponent？了解子路由在父组件的路由器出口中呈现子组件的内容非常重要。你想实现什么？我想是的，我对Angular很陌生，但我想实现的是在导航到根目录时显示homecomponent，其中包含一些内容。然后当你导航到它的子组件时，子组件的内容应该是可见的。很抱歉回答得太晚，这是有效的，但我不知道我哪里做错了？我想你看不到子组件，因为HomeComponent中没有子组件。Manu Bhardwaj的回答也是正确的，但这取决于你喜欢哪种行为：我的家，child1或child2一个接一个地显示出来，或者Manu Bhardwaj的家，child1或child2在家组件内部可见抱歉回答晚了，这是可行的，但我看不出哪里做错了？我想你看不到子组件，因为HomeComponent中没有。Manu Bhardwaj的回答也是正确的，但这取决于您喜欢哪种行为：我的家、孩子1或孩子2逐个显示，或者Manu Bhardwaj，孩子1或孩子2在家组件内部可见