Angular路由器：命名的插座似乎不适用于相对路由，也不适用于延迟加载的模块 lazy-member-routing.module app-routing.module.ts list.component.html

问题描述

我的角度路由器和命名插座有一些问题。我有一个成员列表，并且想在命名路由器出口的同一页面上编辑单击的成员。而且我想让成员在延迟加载的模块中进行处理。

当模块不是延迟加载时可以使用。模板如下所示：

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

这行不通，我认为这是一个已知的错误，路由器在成员列表之后用一个斜杠构造此URL：

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

我尝试过：

<a [routerLink]="['../',member._id]}}]"> Edit</a>

当我第一次单击成员时，它起作用。并提供以下网址：

/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'],member._id]}}]">Edit</a>

没有运气。

我在延迟加载的模块中尝试使用“完整路径名”。

<a [routerLink]="['/home/member',member._id]}}]"> Edit</a>

礼物：

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

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

解决方法

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

lazy-member-routing.module

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',{
            path: 'edit/:id',outlet: 'right'
          }
        ]
      },{ 
        path: 'lazymember',loadChildren: () => import('./lazy-member/lazy-member.module').then(m => m.LazyMemberModule),}
    ]
  },{ 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: '',。基本上，对于UrlSegmentGroup的每个子代，它将循环遍历当前路由数组并尝试查找匹配项。

例如，主UrlSegmentGroup如下所示：

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

然后

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

如果您想了解有关UrlTree和UrlSegmentGroup的更多信息，我已经为此写了article。

angular angular angular-router angular10 lazy-loading