Question

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

每个“子”路由都在其自己的路由模块中定义。

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

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

其他“子”路由（文件和文件夹）几乎类似于searchRoutes的配置。

我要解决的主要问题是：

对于父组件路径（“工作区”），如果我使用“”作为路径而不是“工作区”，我希望实际的工作区会被加载，但子路线之一会被加载

如何设置路由，以便：

我可以导航到http://localhost:8080/search并加载父组件（WorkspaceComponent），而不必在URL中添加“工作区”？
用户可以导航到应用程序的根URL（即http://localhost:8080），并且它将自动路由到http://localhost:8080/search（假设我们可以执行此操作而不必在路径中指定“工作区”）

Answer 1

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

子模块中的带有子路由的Angular 8路由

1 个答案: