带路由参数的懒负载模块，并命名为路由器出口

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

加载路线会导致错误：

错误：无法匹配任何路由。URL段：" Projects/Profile/-3'

当我为子模块中的路径使用一个空字符串时，没有错误，并且模块加载，但是组件不会加载。我在懒惰的加载路线参数方面找到了这种帮助，并且在懒惰加载插件的懒惰加载方面有帮助，但两者都没有工作。

我的问题是：如何用路由参数加载路由并命名路由器出口？

- 编辑 -

这是一个显示我问题的演示应用程序。我创建了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'：

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

因此，在反复试验后，我找到了答案。我创建了实现它的演示。值得注意的是，我需要带有路由参数的多个路由器输出(该演示仅包含一个具有一个路由器插座的组件，但是我的实际应用具有两个。因此，我需要命名(

父级模块

正如托马斯·凯恩(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' }
   ] 
  },
 ];

父模板

最后，用命名的路由器插座和路由通过懒惰的模块路由路由路由器的路由器链路如下：

：

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

Answer 4

查看此信息后https://newbedev.com/angular-4-lazy-loading-with-named-named-router-outlet-not-working解决方法是在使用命名插座时避免使用懒惰的模块中的空白路径。Angular为此有一个错误，但是它已关闭，因为没有人会提供一个例子。https://github.com/angular/angular/issues/16406

在您的stackblitz项目中尝试一下：

  path: 'profileoutlet', component: ProfileComponent,
   children: [
    { path: 'bar/:id', component: SidebarComponent, outlet:'sidebar' }
  ] 

in profile.routing.ts和

  <a [routerLink]="['/', 'profile', 3, 'profileoutlet', { outlets: { sidebar: ['bar', 3 ] } }]">Outlet defined and specified doesn't work (ProfileModule)</a>

对于app.component.ts