具有路由参数和命名路由器出口的延迟加载模块

Question

我有一个路由/组件，它需要一个路由参数并且有一个命名的出口。我想延迟加载一个模块并激活这条路线。这是我的路线：

Profile Module（子模块）Routes：

const routes: Routes = [
{
  path: ':id', component: ProfileComponent
  children: [
   { path: 'list/:id', component: ListComponent, outlet: 'sidebar' },
   { path: 'risk/:id', component: RiskComponent, outlet: 'sidebar' }
  ], 
];

父模块路由

const routes: Routes = [
  { path: 'projects/profile',
    loadChildren: './profile/profile.module#ProfileModule' }
 ]

加载路由报错：

错误：无法匹配任何路由。 URL 段：'projects/profile/-3'

当我在子模块中使用空字符串作为路径时，没有错误并且模块加载但组件不加载。我发现 this help 使用延迟加载路由参数，this help 使用延迟加载命名路由器出口，但都没有工作。

我的问题是： 如何延迟加载带有路由参数和命名路由器出口的路由？

--编辑--

这是一个demo app，它显示了我的问题。我创建了 3 条主要路线：一种延迟加载没有命名插座的子模块，一种延迟加载带有命名插座，另一种不使用延迟加载。在 UI 中，指向具有命名出口的路由的链接会产生上述错误。

Answer 1

你似乎有两次component: ProfileComponent。那是你要的吗？这可能会导致路由问题。

此外，对于延迟加载包含它的子模块的模块，在您的父路由中，您还可以这样做：

const routes: Routes = [
  { path: 'projects/profile',
    loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule')
  }
 ]

如果您有一个演示应用程序进行诊断，那将会很有帮助。 StackBlitz 示例可以提供更多帮助。

更新：

在你的 app.module.ts 中：

const routes: Routes = [
  { path: 'profile',
    loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule')
  }
 ]

在您的 profile.routing.ts 中：

const appRoutes: Routes = [
  {
    path: '', 
    pathMatch: 'full',
    component: ProfileComponent,
  },
  {
    path: 'sidebar', component: SidebarComponent,
    children: [
    {
     path: ':id',
    component: AdminUserDetailsComponent,
    }
    ]
  },
];

我认为您不需要name="sidebar" in. Make it`，因为您已经在模块中。路径匹配：“完整”：

pathMatch = 'full' 剩余时会导致路由命中， URL匹配的不匹配段是前缀路径

https://angular.io/guide/router#set-up-redirects

最后，您的链接应该导航到完整路径：

  <a [routerLink]="['/profile/sidebar']">Outlet defined and specified doesn't work (ProfileModule)</a>
  <a [routerLink]="['/profile']">With outlet defined but not specified (ProfileModule: '/profile/3')</a>

我从不使用内联参数路由，因为它们难以阅读、导航、计算和调试。

Answer 2

它应该和经典的延迟加载没有什么不同，可能导致问题的原因是路径：':id'在配置文件路由中，尝试将其更改为空path: ''，您也可以将:id移动到父路由路径：'projects/profile/:id'

Answer 3

所以经过反复试验，我找到了答案。我创建了这个实现它的demo。作为说明，我需要多个带有路由参数的路由器插座（演示只包含一个具有一个路由器插座的组件，但我的实际应用程序有两个。因此我需要命名它）

父模块

正如 Thomas Cayne 所提到的，延迟加载模块的链接如下（注意缺少 :id 路由参数。这是因为该路由仅用于延迟加载）：

{ path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) },

子模块

子模块中的路由如下：（顶级路由具有 :id 路由参数，因为它的组件需要使用 :id。在我的例子中，子插座也需要一个 :id。插座使用参数来加载它的数据。）

 const appRoutes: Routes = [
  { 
   path: 'test/:id', component: ProfileComponent,
   children: [
    { path: 'bar/:id', component: SidebarComponent, outlet:'sidebar' }
   ] 
  },
 ];

父模板

最后，通过延迟加载模块正确路由到具有命名路由器出口和路由参数的组件的 routerLink 如下：

<a [routerLink]="['/', 'profile', 'test', 3, { outlets: { sidebar: ['bar', 3 ] } }]">Working Router outlet and route params</a>