How to elegantly get full url from the ActivatedRouteSnapshot?
Radosław Roszkowiak
In some of my Angular route guards, I want to set up the "next" path, to redirect to after successful login.
So, the ordinary guard canActivate function signature looks like this:
public canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
// ...blah
return true;
}
The route parameter is an instance of ActivatedRouteSnapshot.
Previously to get the "next" URL I was just getting it from the route.url. This works just fine, as long as there are no children routes.
My example URL is /search/advanced?query_hash=1221d3b57f5616ee16ce70fdc78907ab, where advanced is a child route of a search.
Child routes can be found in route.children, but iterating over these children (especially there might be multiple levels) and combining the URL this way seems awkward and ugly.
What I'm interested in is contained in route._routerState.url property (being a string, on the bottom of the image below), but it's a "private" variable.
Am I missing something? How can one elegantly get the full (with children paths) URL from the ActivatedRouteSnapshot? Angular version is 5.1.
Marc J. Schmidt
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('/'))
.join('/');
}
function getConfiguredUrl(route: ActivatedRouteSnapshot): string {
return '/' + route.pathFromRoot
.filter(v => v.routeConfig)
.map(v => v.routeConfig!.path)
.join('/');
}
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: I dont get rxjs 6 with angular 6 with interval, switchMap, and map
- Next: Angular 6 MatTable Performance in 1000 rows.
Related
TOP Ranking
- 1
Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)
- 2
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 3
pump.io port in URL
- 4
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 5
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 6
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 7
Emulator wrong screen resolution in Android Studio 1.3
- 8
3D Touch Peek Swipe Like Mail
- 9
Double spacing in rmarkdown pdf
- 10
Svchost high CPU from Microsoft.BingWeather app errors
- 11
How to how increase/decrease compared to adjacent cell
- 12
Using Response.Redirect with Friendly URLS in ASP.NET
- 13
java.lang.NullPointerException: Cannot read the array length because "<local3>" is null
- 14
BigQuery - concatenate ignoring NULL
- 15
How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?
- 16
ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
- 17
Can a 32-bit antivirus program protect you from 64-bit threats
- 18
Make a B+ Tree concurrent thread safe
- 19
Bootstrap 5 Static Modal Still Closes when I Click Outside
- 20
Vector input in shiny R and then use it
- 21
Assembly definition can't resolve namespaces from external packages
Comments