角度路由:为子路径添加前缀:ID路径

Question

我的路由文件中有以下路由：

{
path: 'new', component: CreateTeamComponent
},
{
path: ':ID-TEAM', children: [
{
path: 'edit', component: EditTeamComponent
},
{
path: 'edit-player/:ID-PLAYER', component: EditPlayerComponent
},
{
path: '', component: TeamDetailsComponent
}
]
}   

我想用'edit-player-:ID-PLAYER'替换'edit-player/:ID-PLAYER'，使其具有这样的url：/teams/1111/edit-player-222222。

第一种方法是可行的，但它可能会让用户有点困惑，因为在'edit-player'路径上看不到任何东西。第二个引导我到页面未找到回退。

如何解决？

Answer 1

您可以使用Angular的UrlMatcher来应用regex来编辑播放器路径。

它应该是这样的：

RouterModule.forRoot([
{
matcher: url => {
console.log(url);
if (url[url.length - 1].path.match(/^edit-player-[d]+$/gm)) {
return {
consumed: url,
posParams: {
playerId: new UrlSegment(
url[url.length - 1].path.split('-').slice(-1)[0],
{}
)
}
};
}
return null;
},
component: EditPlayerComponent
}
])

Stacklitz 中的示例

Answer 2

如果第一种方法有效，您担心的是路由edit-player可能会令人困惑；然后您可以在该路径上设置重定向。

{
path: 'new', component: CreateTeamComponent
},
{
path: ':ID-TEAM', children: [
{
path: 'edit', component: EditTeamComponent
},
{
path: 'edit-player/:ID-PLAYER', component: EditPlayerComponent
},
{
path: 'edit-player', redirectTo: ':ID-TEAM/edit', pathMatch: 'full'
},
{
path: '', component: TeamDetailsComponent
}
]
}