I am using angular2 router.
To draw the breadcrumb of an url, lets say site.com/a/b/c/15 I do the following:
- Get the route of
site.com/a/b/c/15
and get the pretty name associated to the route - Get the route of
site.com/a/b/c
and get the pretty name associated to the route - Get the route of
site.com/a/b
and get the pretty name associated to the route - Get the route of
site.com/a
and get the pretty name associated to the route
So lets say I do have the following routes:
{ path: 'a', component: A, data:{prettyName: 'I am A'}}
{ path: 'b', component: B, data:{prettyName: 'I am B'}},
{ path: 'c', component: C, data:{prettyName: 'I am C'}},
The result of my process would be an array containing {"I am C", "I am B", "I am C"}
and thanks to that I can display a nice breadcrumb "I am A > I am B > I am C"
that explains the current route.
This use to work with the router-deprecated doing
this.router.recognize(url).then((instruction) => {
instruction.component.routeData.get('prettyName') // Would return 'I am ..'
However now; with the last router I am not able to process this recognize logic anymore.
How to get the route data associated to an url ?
Any breadcrumb solution has to handle -
I have created an Angular library to handle all these, called xng-breadcrumbs - https://github.com/udayvunnam/xng-breadcrumb
feel free to check, An Angular app developed showing the breadcrumbs usage - https://xng-breadcrumb.netlify.com
Angular library planning, creation, and continuous release is well documented in this medium article
Updated for RC5
Instead of starting with the current URL and trying to get the routes from the URL, you can get all of the activated routes (associated with the primary outlet) from the
RouterState
:Subscribe to router events, then, after each
NavigationEnd
event, walk down the tree ofActivatedRoute
s from theroot
:Routes look like this:
Plunker - RC.5, router 3.0.0-rc.1
See also https://stackoverflow.com/a/38310404/215945 for a similar solution.
So far, the most feasable solution is (done):
Pros: works
Cons: redoing url-route recognition manuall without using the ng2 router one