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

我希望能够对某些路由使用相同的路由器插座。在与父路由器相同的路由器插座中使用子路由

路由设置（简化）：

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

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

回答

相关问题