ロードネストされたルート

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の中にアウトレットがあることを期待しています。

これは私のブレッドクラムコンポーネントを実装し、"Home> Companies> Apple Inc."と書くことが重要です。例えば、である。

このような構造を作成することは可能でしょうか？

Answer 1

私はまったく同じことをやろうとしていましたが、最終的にはこの投稿のおかげでそれをどうやって行うのかを理解しました：Load nested routes in same router-outlet

基本的に何をしたいことはこのようなデフォルトのコンポーネントとして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 
     } 

しかし、私の意見

で、この少し厄介