Angular 带URL前缀的角度模块(路由)

Angular 带URL前缀的角度模块(路由),angular,angular-routing,angular-router,Angular,Angular Routing,Angular Router,我在模块SampleModule中嵌套了以下路由器 const routes: Routes = [ { path: 'samples', component: SampleListComponent, children: [ { path: ':id', component: SampleDetailsComponent, children: [ { ... 然后在我的应

我在模块SampleModule中嵌套了以下路由器

const routes: Routes = [
  {
    path: 'samples',
    component: SampleListComponent,
    children: [
      {
        path: ':id',
        component: SampleDetailsComponent,
        children: [
         {
        ...
然后在我的应用程序组件中,我有下一个定义:

<div class="container">
  <div class="row">
    <div class="col-2">
      <dashboard></dashboard>
    </div>
    <div class="col-10">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

在我的仪表板中,我有使用路由器链接导航到特定模块路由器(ex/samples)的菜单项

URL是root/samples,它继续是root/samples/3

所有工作都非常好,并且该模块的组件都正确显示

问题是,当我试图提供一些文档页面时,这些页面被分成主题、不同的URL前缀

因此,导航时我希望的URL如下所示:

根目录/模块文档/示例


若我导航到文档组件中的samples模块,它将再次导航到root,我的文档组件将丢失。是否有可能在不改变模块中任何内容的情况下以某种方式包装该模块?

我已经设法这样修复了它

文档模块

    const routes: Routes = [
  {
    path: 'documentation-modules', component: LandingPageComponent,
    children: [
      ...SAMPLE_ROUTES
    ]
  },
];
路线样本:

export const SAMPLE_ROUTES: Routes = [
  {
    path: 'samples',
    component: SampleListComponent,
    children: [
      {
        path: ':id',
        component: SampleDetailsComponent,
        children: [
          {
            path: 'depth3',
            component: SampleDepth3Component,
            children: [
              {
                path: 'depth4',
                component: SampleDepth4Component,
                children: [
                  {
                    path: 'depth5',
                    component: SampleDepth5Component,
                  }
                ]
              }
            ]
          }
        ]
      }

    ]
  }
];