如何在 Angular 中加载没有父组件的子路由？

Question

有问题时，它看起来很简单，但我的情况很难用一个问题来解释。案例本身：我想要像下面这样的路由

export const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    resolve: {
      nothing: TranslationLoadResolver
    },
    children: [
      {
        path: 'home',
        loadChildren: () => import('src/app/pages/home/module').then(m => m.HomeModule),
      },
      // few more pages
      {
        path: 'major-documents/:id',
        loadChildren: () => import('src/app/pages/major-documents-details/module').then(m => m.MajorDocumentsDetailsModule),
      },
    ],
  },
];

HomePageComponent 包含大量信息，每隔一个页面就包含一点信息，类似于仪表板。在那里我可以预览“主要文档”，但我没有列出所有文档，因为只有 3 个文档，并且我将它们显示在主页中。但我想在自己的路线“major-documents/:id”上显示这些文档的详细信息。我有 MajorDocumentDetailsModule 的路由配置，如下所示：

export const documentsDetailsRoutes: Routes = [ { path: '', children: [ { path: '', component: MajorDocumentDetailsPage, } ] }, ];

我需要如何修改此路由才能从“/home”移动到“/major-documents/:id”，而无需为“/major-documents”提供单独的页面？

我尝试将

component: MajorDocumentDetailsPage

移动到父路由，尝试将 ':id' 参数移动到“documentsDetailsRoutes”内。它必须以某种方式工作，但我肯定错过了一些东西。

Answer 1

在路由器中使用 3 条路由

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('src/app/pages/home/module').then(m => m.HomeModule),
  },
  // ... other routes
  {
    path: 'major-documents/:id',
    loadChildren: () => import('src/app/pages/major-documents-details/module').then(m => m.MajorDocumentsDetailsModule),
  },
];

然后创建一个文档DetailsRoutes

export const documentsDetailsRoutes: Routes = [
  {
    path: '',
    component: MajorDocumentDetailsPage
  }
];

导航到 /major-documents/1 将加载 MajorDocumentsDetailsModule 并显示具有指定 ID 的主要文档的详细信息。