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

Question

我希望能够为某些路由使用相同的路由器插座.

路由设置(简化):

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时候这条路线是有效的.

这类问题的常见答案:

移动子路由并将其添加到app-route children数组中

不,这不是正确的方法.我们仍然需要我们的路线层次结构.CategoryComponent可能知道PostComponent没有的东西- 比如Breadcrumb命名

所以我们仍然希望我们的CategoryComponent加载.(即使它的视图不是渲染)

使用<router-outlet>内部CategoryComponent

否.CategoryComponent不应该负责它自己的<router-outlet>.本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
                    }
                ]
            }
        ],
    },
];