There’s no ready to use function from Angular router to achieve that, so I wrote them:
function getResolvedUrl(route: ActivatedRouteSnapshot): string {
return route.pathFromRoot
.map(v => v.url.map(segment => segment.toString()).join("https://stackoverflow.com/"))
.join("https://stackoverflow.com/");
}
function getConfiguredUrl(route: ActivatedRouteSnapshot): string {
return "https://stackoverflow.com/" + route.pathFromRoot
.filter(v => v.routeConfig)
.map(v => v.routeConfig!.path)
.join("https://stackoverflow.com/");
}
Example output when route
is from ProjectComponent
:
const routes: Routes = [
{
path: 'project', component: ProjectListComponent, children: [
{path: ':id', component: ProjectComponent}
]
},
];
getResolvedUrl(route) => /project/id1
getConfiguredUrl(route) => /project/:id