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' 以获得如下网址：/teams/1111/edit-player-222222。

第一种方法有效，但对于用户来说可能有点混乱，因为在 'edit-player' 路径上没有什么可看的。第二个引导我到页面未找到回退。

如何解决？

Answer 1

您可以使用 Angular's UrlMatcher 为编辑播放器路径应用正则表达式。

应该是这样的：

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
    }
])

Example in Stackblitz

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

Angular 路由：为子 :ID 路径添加前缀

2 个答案: