Utilize both the Router
and ActivatedRoute
services.
During navigation initiation, explore the activated route to locate the outlet.
You can utilize the snippet below as a foundation.
this.router.events
.pipe(
filter(event => event instanceof NavigationStart),
map(() => this.activatedRoute),
map(activatedRoute => {
while (activatedRoute.firstChild !== null) {
activatedRoute = activatedRoute.firstChild
}
return activatedRoute
}),
filter(activatedRoute => activatedRoute.outlet === "primary"),
mergeMap(activatedRoute => activatedRoute.url),
)
Please Note: This code will function correctly even when implemented in your root component. The activated route does not solely pertain to the route of the specific component that accessed it. It embodies the entire route structure leading to the current route.
In the root component, the activated route refers to the route triggering the component, which is essentially "/". However, you have the freedom to navigate through other routes within the tree if required.
Likewise, in other components, the activated route points to the initiating route for that component. Nonetheless, you can move through the route hierarchy to access alternative routes.