问题描述
伙计们,我在尝试使这段代码正常工作时遇到了一些麻烦。
基本上,我想将一些参数传递给嵌套且命名的 router-outlet
。
我正在使用以下 routerLink
:
<a [routerLink]="[{ outlets: { test: [ crisis.id] } }]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
...
<router-outlet name="test"></router-outlet>
我的路线如下:
{
path: '',component: CrisisListComponent,children: [
{
path: ':id',component: CrisisDetailComponent,canDeactivate: [CanDeactivateGuard],resolve: {
crisis: CrisisDetailResolverService
},outlet: 'test'
},{
path: '',component: CrisisCenterHomeComponent
}
]
}
在 stackoverflow 中搜索后,根据答案,这应该有效,但事实并非如此。有没有人对我缺少的东西有任何了解? 提前致谢
解决方法
编辑
我写了一篇文章,详细介绍了 Angular 11 附带的新修复:Angular Router: empty paths,named outlets and a fix that came with Angular 11。
TLDR;
详细说明
为什么它首先不起作用
一个TLRD,因为具有(嵌套)空路径的命名插座并不总是运行良好(至少在旧版本中)。这是其中一种情况。
首先,重要的是要提及 Angular Router 如何处理路由及其更改。例如,它在名为 UrlTree
1 的数据结构的帮助下跟踪当前 URL。 UrlTree 可以被认为是 URL 的反序列化版本,它是一个字符串。给定一个 UrlTree
,将基于这个 UrlTree
遍历路由配置数组(以 DFS 方式)。
UrlTree 的根是另一个结构,UrlSegmentGroup
:
constructor(
/** The URL segments of this group. See `UrlSegment` for more information */
public segments: UrlSegment[],/** The list of children of this group */
public children: {[key: string]: UrlSegmentGroup}) {
forEach(children,(v: any,k: any) => v.parent = this);
如您所见,它类似于常规的树结构。 segments
数组中的 a 段包含 path
(例如 'crisis-center'
)和给定路径的矩阵参数。至于 children
属性,其键是网点名称(例如 'test'
),值是 UrlSegmentGroup
实例。通过使用这些结构,Angular Router 可以表示 URL 字符串并可以提供许多功能和自定义。
给定来自 crisis-center-routing.module.ts
的路由配置:
const crisisCenterRoutes: Routes = [
{
path: '',// (1)
component: CrisisCenterComponent,children: [
{
path: '',// (2)
component: CrisisListComponent,children: [
{
path: ':id',// (3)
component: CrisisDetailComponent,canDeactivate: [CanDeactivateGuard],resolve: {
crisis: CrisisDetailResolverService
},outlet: 'test'
},{
path: '',component: CrisisCenterHomeComponent
}
]
}
]
}
];
将路由配置对象与 UrlTree
匹配的 path: ':id'
大致如下所示:
// Note: For simplicity,I've only used the `path` to represent the `segments` property
UrlTree {
// UrlSegmentGroup
root: {
children: {
primary: {
children: {
primary: {
children: {
test: {
children: {}
segments: [1],// Matches (3)
}
},segments: [''],// Matches (1) and (2)
}
}
segments: ['crisis-center'],}
}
segments: [],}
}
注意:出口的默认名称是 'primary'
。
上面的UrlTree可以这样实现:
<a [routerLink]="['/crisis-center',{ outlets: { primary: ['',{ outlets: { test: [crisis.id] } }] } }]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
虽然上述方法理论上应该有效,但实际上并没有。这是因为 ''
未被 消耗,当发生这种情况时,将选择 primary
插座。更具体地说,来自 ''
的 primary: ['' ...
将与 (1)
匹配,但第二个 ''
(from (2)
) 不会被消耗。
然而,这似乎to be fixed in Angular v12:
// At this point,not all paths of the `segment` array have been consumed.
// This time,the route's outlet is taken into account.
const matchedOnOutlet = getOutlet(route) === outlet;
const expanded$ = this.expandSegment(
childModule,segmentGroup,childConfig,slicedSegments,matchedOnOutlet ? PRIMARY_OUTLET : outlet,true);
但是 this 是以前的样子:
// At this point,not all paths of the `segment` array have been consumed.
// As you can see,it always chooses the `primary` outlet
const expanded$ = this.expandSegment(
childModule,PRIMARY_OUTLET,true);
由于您是旧版本,我们需要找到另一种方法。
类似的事情发生在当前的方法中:
<a [routerLink]="[{ outlets: { test: [ crisis.id] } }]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
但是这次导航不会成功,因为网点之间会出现不匹配。它会在 (2)
处失败,其中路由的出口为 primary
,但此时根据当前 UrlSegmentGroup
的出口为 test
。
解决方案
首先,我注意到 CrisisCenterComponent
的作用不大:
<h2>CRISIS CENTER</h2>
<router-outlet></router-outlet>
所以,我们会摆脱它。这就是我们剩下的:
crisis-center-routing.module.ts:
const crisisCenterRoutes: Routes = [
{
// path: '',// component: CrisisCenterComponent,// children: [
// {
path: '',component: CrisisListComponent,component: CrisisDetailComponent,component: CrisisCenterHomeComponent
}
]
}
// ]
// }
]
现在,由于 CrisisListComponent
充当容器,我们可以进行以下替换:
crisis-center-routing.module.ts:
const crisisCenterRoutes: Routes = [
{
// path: '',// children: [
// {
// path: '',// component: CrisisListComponent,// children: [
// {
path: ':id',component: CrisisCenterHomeComponent
}
// ]
// }
// ]
// }
]
app-routing.module.ts
{
path: 'crisis-center',loadChildren: () =>
import('./crisis-center/crisis-center.module').then(
mod => mod.CrisisCenterModule
),data: { preload: true },// !
component: CrisisListComponent
},
因此,不会有额外的 ''
(正如我们所见,有时会导致问题)匹配。
视图中的 routerLink
将保持不变:
<a [routerLink]="[{ outlets: { test: [ crisis.id] } }]">
<span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
</a>
顺便说一下,现在当您选择一个危机中心时,CrisisCenterHomeComponent
也将处于活动状态。如果你想避免这种情况,你可以这样做:
crisis-center-routing.module.ts:
/* ... */
{
path: ':id'
component: CrisisDetailComponent,resolve: {
crisis: CrisisDetailResolverService
},outlet: 'test'
},{
path: '',// Uncomment this if you want these 2 Route objects
// to be mutually exclusive(either one of them,not both at the same time)
pathMatch: 'full',component: CrisisCenterHomeComponent
}
/* ... */
1:Angular Router: Getting to know UrlTree,ActivatedRouteSnapshot and ActivatedRoute
如果您想阅读有关 Angular Router 及其内部工作原理/功能的更多信息,我建议: