在与父级相同的路由器出口中使用子路由

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 子数组中

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

所以我们仍然希望我们的 CategoryComponent 能够加载。 （即使它的视图没有渲染）

在CategoryComponent 中使用<router-outlet>

没有。 CategoryComponent 不应该负责它自己的<router-outlet>。 PostComponent 应该在 CategoryComponent 的位置呈现，并添加 CSS 来放置它应该是非法的。

我怎样才能实现这种行为？

我需要编写自己的路由器插座吗？

这会在 Angular4 中解决吗？

欢迎任何提示！谢谢

Answer 1

如果我做对了，您可以尝试使用“包装器”之类的方法来解决问题。这样（我没有测试过这段代码，但它应该可以工作；阅读内联 cmets）：

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

Answer 2

答案here 会起作用。

根据您构建面包屑的方式，您可能需要有多个嵌套级别的children: [] 和path: ''。

• 子级将在其父级链中找到的第一个组件中进行渲染。
• 路由器将从所有path 属性中构建一条路径，如果有''，则将向上使用父path 属性。
• 面包屑生成器还将沿着子链向上移动，但如果它找到 data: {breadcrumb: 'crumb'} 或 data: {title: 'crumb'} 或它正在寻找的任何东西，它会将其构建到面包屑链中。

因此，您可以根据需要制作面包屑，并根据需要设置路径，但只要您不嵌套组件，您就会得到您想要的。

export const routes: Routes = [
  {
    path: 'app',
    component: AppComponent,
    data: {
      title: 'App',
    },
    children: [
      {
        path: 'category/:id',  // appends to path `app`
        children: [
          {
            path: '',
            data: {
              title: 'Category',  // appends to breadcrumb `App`
            },
            children: [
              {
                path: '',
                component: CategoryComponent,  // renders in `AppComponent`
                data: {
                  title: '',  // Specify a blank on so that we don't duplicate the parent one
                },
              },
              {
                path: 'post/:id',  // appends to path `app/category/:id`
                component: PostComponent,  // renders in `AppComponent`
                data: {
                  title: 'Post',  // appends to breadcrumb `App / Category`
                },
              },
            ],
          },
        ],
      },
    ],
  },
];

Answer 3

由于我们同时处于 Angular 7 并且似乎没有这方面的文档，我想没有简单的开箱即用的问题解决方案。

我有一个非常相似的问题：延迟加载模块的子路由应该在应用程序组件的出口内呈现，而不是在延迟加载模块的出口内。我正在使用lazy loaded modules，但您可能可以将这个想法转化为您的用例。 我能够通过在预期的出口级别定义相应的路由来解决这个问题，这意味着在 AppRoutes 内部（我认为没有其他方法）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'category/:cid',
    loadChildren: './category/category.module#CategoryModule',
  },
  {
    path: 'category/:cid/post/:pid',
    loadChildren: './category/post/post.module#PostModule'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这样我至少可以保证文件夹结构和 URL 层次结构保持我想要的样子。为了解决你提到的状态管理问题，我会反序列化 PostComponent 或 PostRoute 中的类别数据。但是，这会引入一些可能不需要的冗余。

对我来说，这远非理想，因为我无法按照我想要的方式将东西封装在延迟加载的模块中。但是：它正在工作。