在與父路由器相同的路由器插座中使用子路由

我希望能夠對某些路由使用相同的路由器插座。在與父路由器相同的路由器插座中使用子路由

路由設置（簡化）：

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

例如，我們有以下路徑：

/app/category/1/post/1

即破裂成

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

的AppComponent具有<router-outlet>這使得CategoryComponent，但也應該在該路線處於活動狀態時呈現PostComponent。

對這類問題的回答常見：

移動子路由，並將它們添加應用程序路由兒童陣列

號這是不正確的做法。我們仍然需要我們的路線層次結構。 CategoryComponent可能知道PostComponent沒有的東西 - 比如Breadcrumb命名

所以我們還是希望我們的CategoryComponent加載。（即使它的觀點是不渲染）

使用<router-outlet>內的CategoryComponent

號的CategoryComponent不應該負責它自己的<router-outlet>的。 PostComponent應代替CategoryComponent呈現，並添加CSS以將其放置爲非法。

我該如何實現這種行爲？

我需要寫我自己的路由器插座嗎？

這會在Angular4中解決嗎？

歡迎任何提示！謝謝

來源

2017-01-25 Marcus Brunsten

我有完全相同的問題。你有沒有想出一個解決方案或解決方法？ – Kersch

@Kersch對不起，我沒有任何新東西。 –

這裏同樣的問題。我不明白爲什麼它不支持角度，因爲很多網站都是這樣工作的！ – Sonne

如果我說得對，可以嘗試使用類似「包裝器」的方法來解決問題。這樣（我沒有測試過這個代碼，但它應該可以工作;閱讀內嵌評論）：

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

來源

2017-06-22 16:47:55 Doug

在與父路由器相同的路由器插座中使用子路由

回答

相關問題