親ルーターと同じルーター・アウトレットで子ルーティングを使用

Question

一部のルートで同じルーター・アウトレットを使用したいと考えています。

/app - AppComponent 
|_ /catory/1 - CategoryComponent 
    |_/post/1 - PostComponent 

に侵入

/app/category/1/post/1 

AppComponentは、CategoryComponentをレンダリング<router-outlet>があります

ルーティングの設定（簡体字）：

export const routes: Routes = [ 
    { 
     path: 'app', component: AppComponent, 
      children: [ 
       path: 'category/:id', component: CategoryComponent, 
       children: [ 
        { path: 'post/:id', component: PostComponent } 
       ] 
      ] 
    } 
]; 

例えば、我々はこのパスを持っています そのルートがアクティブなときにPostComponentをレンダリングします。質問のこのタイプの

共通の答え：

子ルートを移動し、これは正しい方法ではありません番

アプリルート子配列にそれらを追加。私たちはまだルートの階層を望んでいます。 CategoryComponentはPostComponentのようなものを知っているかもしれません - Breadcrumbのような名前です

私たちはまだCategoryComponentをロードします。

を<router-outlet>それ自身の担当してはならない<router-outlet>

CategoryComponentの内部号CategoryComponentを使用して（それがだ場合でもビューがレンダリングされていません）。 PostComponentは、CategoryComponentの代わりにレンダリングされ、違法であるはずのように配置するためにCSSを追加する必要があります。

この動作はどのように達成できますか？

私は自分のルータのアウトレットを書く必要がありますか？

これをAngular4で解決しますか？

ヒントをお待ちしています！ありがとうございました

Answer 1

私はそれが正しい場合は、 "ラッパー"のようなものを使用して問題を解決しようとすることができます。この方法（私はこのコードをテストしていませんが、それは動作するはずです;インラインコメントを読む）：

export const routes: Routes = [ 
    { 
     path: 'app', 
     component: AppComponent, 
     children: [ 
      { 
       path: 'category/:id', // app/category/:id/ 
       children: [ 
        { 
         path: '', // app/category/:id/ => By default, empty paths serve as if they were the parent path. 
         component: CategoryComponent, 
         children: [ // These children will be inside the <router-outlet> of the CategoryComponent. 
          { 
           path: 'subcategory1', // app/category/:id/subcategory1 
           component: PostComponent, 
          }, 
          { 
           path: 'subcategory2', // app/category/:id/subcategory2 
           component: PostComponent, 
          } 
         ] 
        }, 
        { // The PostComponent will use AppComponent as its parent; will be loading inside the <router-outlet> of AppComponent. 
         path: 'post/:id', // app/category/:id/post/:id 
         component: PostComponent 
        } 
       ] 
      } 
     ], 
    }, 
];