Angular 8 在子模块中使用子路由进行路由

Question

在我的应用程序中，我有一个 "parent" 组件 (WorkspaceComponent)，它定义整体布局并为应用程序执行一些脚手架（实际上它是大部分内容的包装器）。理想情况下，我希望此组件不占用任何 URL.

每个 'child' 路由都在它们自己的路由模块中定义。

父路由配置：（应用路由）

const routes: Routes = [
  {path: 'denied', component: DenialComponent},
  {path: 'workspace', component: WorkspaceComponent, children: [
      {path: 'search', loadChildren: () => import('./search/search.module').then(m => m.SearchModule)},
      {path: 'files', loadChildren: () => import('./files/files.module').then(m => m.FilesModule)},
      {path: 'folders', loadChildren: () => import('./folders/folders.module').then(m => m.FoldersModule)},
      {path: '', redirectTo:'search', pathMatch:'full'}
    ]},
  {path: '', redirectTo:'workspace', pathMatch:'full'}
];

子路由配置-（搜索）

const searchRoutes: Routes = [{
  path: '', component: SearchComponent, children: [
    {path: 'new', component: SearchEditComponent, pathMatch:'prefix'},
    {path: 'edit/:queryId', component: SearchEditComponent, pathMatch:'prefix'},
    {path: 'convert/:queryId', component: SearchConvertComponent, pathMatch:'prefix'},
    {path: 'details/:queryId', component: SearchDetailsComponent, pathMatch:'prefix'},
    {path: '', redirectTo: 'new', pathMatch: 'full'}
  ],
  runGuardsAndResolvers: 'always'
}];

其他 'child' 路由（文件和文件夹）几乎模仿 searchRoutes 配置。

我面临并需要帮助的主要问题是：

对于父组件路径 ('workspace')，如果我使用“ ”而不是 'workspace' 作为路径，我希望加载实际的工作区，而不是子路径之一已加载

如何设置路由以便：

我可以导航到 http://localhost:8080/search 并加载父组件 (WorkspaceComponent)，而不必在 URL?
用户可以导航到应用程序的根 URL（即 http://localhost:8080），它会自动路由到 http://localhost:8080/search（假设我们可以这样做而不必在路径中指定 'workspace'）

Answer 1

因此，app.module.ts 文件中的导入顺序似乎影响了我的应用程序的加载方式。我在其他组件路由模块下方列出了 AppRoutingModule。呃！

Angular 8 在子模块中使用子路由进行路由

Angular 8 Routing with Child routes in sub-modules

angular

angular-ui-router