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

Question

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

StackBlitz

它在模块未延迟加载时起作用。模板如下所示:

<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'.

网址是:

/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

它应该以这种方式与延迟加载模块一起工作:

惰性成员路由.module

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

应用程序路由.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 Router 解析导航的方式，它最初不适用于 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: '',组件:LazyMemberComponent，子组件:[...] }]；这就是它之前不起作用的原因

如果您想阅读更多关于 UrlTree 和 UrlSegmentGroup 的信息，我写了一个 article对此。