Angular 路由器：命名插座似乎不适用于相对路由，也不适用于延迟加载的模块

Question

我在使用 angular 路由器和命名插座时遇到了一些问题。我有一个成员列表，想在命名路由器出口的同一页面上编辑一个点击的成员。我希望在延迟加载的模块中处理成员。

当模块没有延迟加载时它会起作用。模板如下所示：

<tr *ngFor="let member of members">
...
<a [routerLink]="['/home/member', {outlets: {right: ['memberedit', member._id]}}]"> Edit</a>

和路由数组：

const routes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
      {
        path: 'member', component: MemberComponent,
        children: [
          {
            path: 'memberlist', component: MemberListComponent,
            resolve: { resolvedListData: MemberListResolver },
          },
          {
            path: 'memberedit/:id', component: MemberEditComponent,
            resolve: { resolvedMember: MemberResolver }
            outlet: 'right',
          },
        ]
      },
    ]
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

当我试图删除对 /home/member 的引用以准备延迟加载时，它不再有效：

我试过：

<a [routerLink]="[{outlets: {right: ['memberedit', member._id]}}]">Edit</a>

这不起作用，我认为这是一个已知错误，路由器在 memberlist:

之后用一个斜杠构造这个 URL

/home/member/memberlist/(right:memberedit/5f39748b88457a30e32e909d)

我试过：

<a [routerLink]="['../', {outlets: {right: ['memberedit', member._id]}}]"> Edit</a>

我第一次点击成员时它起作用了。并给出这个 URL:

/home/member/(memberlist//right:memberedit/5f39748b88457a30e32e909d)

我第二次点击另一个成员时出现此错误：

Error: Two segments cannot have the same outlet name: 'memberedit/5f4227887687e3162d94f5a3' and 'memberedit/5f39748b88457a30e32e909d'.

而 URL 是：

/home/member/(/(right:memberedit/5f4227887687e3162…f5a3)//right:memberedit/5f39748b88457a30e32e909d)"

我也尝试过：

<a [routerLink]="[{outlets: {primary: ['memberlist'], right: ['memberedit', member._id]}}]">Edit</a>
<a [routerLink]="['../', {outlets: {primary: ['memberlist'], right: ['memberedit', member._id]}}]">Edit</a>

运气不好。

我试过在延迟加载的模块中使用“完整路径名”但不起作用。

<a [routerLink]="['/home/member', {outlets: {right: ['memberedit', member._id]}}]"> Edit</a>

给出：

url: "/home/member/(memberlist//right:memberedit/5f39748b88457a30e32e909d)", urlAfterRedirects: "/home/member"

并且我已经在延迟加载模块中尝试了以上所有方法。有什么想法吗？

Answer 1

它应该以这种方式与 lazy-loaded 模块一起工作：

lazy-member-routing.模块

const routes: Routes = [
    // {
    //     path: '', component: LazyMemberComponent,
    //     children: [
            {
                path: 'list', component: ListComponent,
            },
            {
                path: 'edit/:id', component: EditComponent,
                outlet: 'lazyright',
            },
    //     ]
    // },
];

app-routing.module.ts

const routes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
      {
        path: 'member', component: MemberComponent,
        children: [
          {
            path: 'list', component: ListComponent,
          },
          {
            path: 'edit/:id', component: EditComponent,
            outlet: 'right'
          }
        ]
      },
      { 
        path: 'lazymember', 
        loadChildren: () => import('./lazy-member/lazy-member.module').then(m => m.LazyMemberModule),
        component: LazyMemberComponent,
      }
    ]
  },
  { path: '', redirectTo: 'home', pathMatch: 'full'}
];

list.component.html

<a [routerLink]="['/home/lazymember', {outlets: {lazyright: ['edit', member.id]}}]">Edit works - No, no longer</a>

StackBlitz demo

由于 Angular 路由器解析导航的方式，它最初不适用于 path: '', component: LazyMemberComponent,。基本上，对于 UrlSegmentGroup 的每个子节点，它将遍历当前路由数组并尝试找到匹配项。

例如，主要 UrlSegmentGroup 看起来像这样：

{
   children: {
     primary: {
      children: {
         lazyright: {
            children: {},
            segments: ['edit', '2']
         },
         primary: {
            children: {},
            segments: ['list'],
         }
      }
      segments: ['home', 'lazymember']
     } 
   },
   segments: []
}

然后，

'home' 段将匹配 path: 'home', component: HomeComponent,
'lazymember' 段将匹配 path: 'lazymember' ...
现在我们有 lazyright 和 primary，它们都必须在当前路由数组中找到它们的匹配项，现在是 [{ path: '', component: LazyMemberComponent, children: [...] }]；这就是它之前不起作用的原因

如果您想阅读更多关于 UrlTrees 和 UrlSegmentGroups 的内容，我已经写了一个 article 关于这个。

Angular 路由器：命名插座似乎不适用于相对路由，也不适用于延迟加载的模块

Angular router: named outlets does not seem to work with relative routes nor in lazy loaded modules

lazy-loading

angular

angular-router

angular10

lazy-member-routing.模块

app-routing.module.ts

list.component.html