延迟加载没有共同 url 祖先的角度子路由

Question

我正在使用 Angular 15。在我的主模块的路由中，我有以下路由来延迟加载 MediaModule

  {
    path: 'video-page',
    loadChildren: () => import('app/myapp/submodules/media.module').then(m => m.MediaModule),
  },
  
  
  {
    path: 'image-page',
    loadChildren: () => import('app/myapp/submodules/media.module').then(m => m.MediaModule),
  },
  {
     path: '',
     import('app/myapp/submodules/hp.module').then(m => m.HPModule),
  },
  
  

这是我从 MediaModule 的路由：

{
    path: 'video-page/:documentId',
    component: VideoPageComponent,
    //pathMatch:'full',
    data: {
      breadcrumb: 'Media page'
    }
  },

  {
    path: 'video-page/:documentId/:documentTitle',
    component: VideoPageComponent,
    data: {
      breadcrumb: 'Media page'
    }
  },

  {
    path: 'image-page/:imageId',
    component: ImagePageComponent,
    data: {
      breadcrumb: 'Image page'
    }
  },

  {
    path: 'image-page/:imageId/:imageTitle',
    component: ImagePageComponent,
    data: {
      breadcrumb: 'Image page'
    }
  }

现在我希望 url

video-page/:documentId

和

video-page/:documentId/:title

延迟加载

MediaModule

并显示

VideoPageComponent

组件，以及 url

image-page/:imageId

和

image-page/:imageId/:title

延迟加载

MediaModule

并显示

ImageComponent 

如何修改路由来实现此目的？我所有的尝试要么返回 404，要么仅返回有效的路由。我尝试修改

pathMatch

，但似乎不起作用。如果我从 MediaModule 路由中删除“图像页面”或“视频页面”，则路由器无法区分图像页面和视频页面。我确实希望将它们放在同一个模块中，因为它们共享许多通用组件

Answer 1

首先将根移动到子模块，以便您可以在应用程序模块中拥有单一定义。然后实现子级来动态渲染路线。

[
  {
    path: 'video-page',
    children: [
      {
        path: ':documentId',
        component: VideoPageComponent,
        //pathMatch:'full',
        data: {
          breadcrumb: 'Media page',
        },
      },
      {
        path: ':documentId/:documentTitle',
        component: VideoPageComponent,
        data: {
          breadcrumb: 'Media page',
        },
      },
  },
  {
    path: 'image-page',
    children: [
      {
        path: ':imageId',
        component: ImagePageComponent,
        data: {
          breadcrumb: 'Image page',
        },
      },
      {
        path: ':imageId/:imageTitle',
        component: ImagePageComponent,
        data: {
          breadcrumb: 'Image page',
        },
      },
  },
]

app.routing.ts

 {
    path: '',
    loadChildren: () => import('app/myapp/submodules/media.module').then(m => m.MediaModule),
  },