负载嵌套路线

Question

我有一个角4应用和我的private.component.html是这样的：

<app-breadcrumb></app-breadcrumb> 
<router-outlet></router-outlet> 

我的路由：

const privateRoutes: Routes = [ 
    { 
     path: '', 
     component: PrivateComponent, 
     children: [ 
      { 
       path: 'dashboard', 
       component: DashboardComponent 
      }, 
      { 
       path: 'settings', 
       component: SettingsComponent 
      }, 
      { 
       path: 'companies', 
       component: CompaniesComponent, 
       children: [ 
        { 
         path: 'add', 
         component: FormCompanyComponent 
        }, 
        { 
         path: ':id', 
         component: CompanyComponent 
        } 
       ] 
      } 
     ] 
    } 
]; 

在第一级的所有组件是呈现在路由器插座的PrivateComponent。但我想（如果可能）所有其他孩子（我可以有多个级别），如/companies/add或/companies/20仍然呈现在我的私人模板的相同路由器插座。我的实际代码，当然，我希望我有companies.component.html内的插座。

这对实现我的面包屑组件和写入“主页>公司> Apple Inc.”很重要。例如，。

有可能创建这样的结构吗？

Answer 1

我正在寻找做同样的事情，并最终想出了如何做到这一点感谢这篇文章：Load nested routes in same router-outlet

添加到@ Karsten的答案，基本上你想要的是有一个componentless路线和作为默认组件，例如这个空路径：

const privateRoutes: Routes = [ 
    path: 'companies', 
    data: { 
     breadcrumb: 'Companies' 
    } 
    children: [{ 
      path: '', //url: ...companies 
      component: CompaniesComponent, 
     } { 
      path: 'add', //url: ...companies/add 
      component: FormCompanyComponent, 
      data: { 
       breadcrumb: 'Add Company' //This will be "Companies > Add Company" 
      } 
     }, { 
      path: ':id', //url: ...companies/5 
      component: CompanyComponent 
      data: { 
       breadcrumb: 'Company Details' //This will be "Companies > Company Details" 
      } 
     } 
    ] 
]; 

你需要动态地修改痕迹改“公司详细信息“与实际的公司名称。

Answer 2

如果您要使companies成为无组件路由，则/companies/add或/companies/20路由仍将在第一个路由器插座内呈现。
这意味着你将不得不离开了组件定义了这条路线，它应该是这样的：

 //... 
     { 
      path: 'companies', 
      children: [ 
       { 
        path: 'add', 
        component: FormCompanyComponent 
       }, 
       { 
        path: ':id', 
        component: CompanyComponent 
       } 
      ] 
     } 

更新

 { 
      path: 'companies', 
      component: CompaniesComponent 
     }, 
     { 
      path: 'companies/add', 
      component: FormCompanyComponent 
     }, 
     { 
      path: 'companies/:id', 
      component: CompanyComponent 
     } 

但是，这在我看来有点讨厌