負載嵌套路線

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 
     } 

但是，這在我看來有點討厭