search

gmostert / ng2-breadcrumb

This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.
MIT License
102 stars 81 forks source link

Optional Parameters show in the breadcrumb #75

Closed GlennVanSchil closed 6 years ago

GlennVanSchil commented 7 years ago

I've configured the following breadcrumb

Projects > Project Name > Fields > Field ID

for URL

/projects/:projectId/fields/:fieldId

I also have pagination

/projects/:projectId/fields/:fieldId?page=1

whenever the pagination is added to the url, it also show in my breadcrumb

selection_019

Update

Found an answer to this in the closed issues.

https://github.com/gmostert/ng2-breadcrumb/issues/28

So I've added an extra friendly name

breadcrumbService.addFriendlyNameForRouteRegex('^/projects/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/fields?page=[0-9]+$', 'Fields');

But it still appears in the breadcrumb

[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12} is the regex for a UUID

GlennVanSchil commented 7 years ago

The problem was with my regex itself. The question marque had to be escaped

breadcrumbService.addFriendlyNameForRouteRegex('^/projects/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/fields?page=[0-9]+$', 'Fields');

To

breadcrumbService.addFriendlyNameForRouteRegex('^/projects/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/fields\\?page=[0-9]+$', 'Fields');