Question

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

配置文件模块（子模块）的路由：

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

加载路线会导致错误：

错误：无法匹配任何路由。网址段：“ projects / profile / -3”

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

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

-编辑-

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

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: ''，也可以移动{{ 1}}到父路由路径：:id

Answer 3

因此，经过反复试验，我找到了答案。我创建了实现它的demo。需要注意的是，我需要多个带有路由参数的路由器插座（该演示仅包含一个路由器插座的组件，但是我的实际应用中有两个路由器插座。因此，我需要将其命名）

父模块

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

{ 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>

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

3 个答案: