我在使用 Angular 路由器和命名 socket 时遇到了一些问题。 我有一个成员列表,想在命名路由器导出的同一页面上编辑一个点击的成员。 我希望在延迟加载的模块中处理成员。
它在模块未延迟加载时起作用。 模板如下所示:
<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"
而且我已经在延迟加载模块中尝试了以上所有方法。 有什么想法吗?
最佳答案
它应该以这种方式与延迟加载模块一起工作:
惰性成员路由.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>
由于 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对此。
关于 Angular 路由器 : named outlets does not seem to work with relative routes nor in lazy loaded modules,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63577079/