angular2/router breadcrumb component

I'm trying to create component similar to this https://github.com/michaelbromley/angularUtils/tree/master/src/directives/uiBreadcrumbs

What I'm doing at the moment is this https://gist.github.com/fxck/108dccf4529becf9bc92

The problem is, that I can't really access route name from instruction, so I can't really create links for the crumbs, workaround was to duplicate name in data(https://gitter.im/angular/angular?at=564a3e5daca9bb7c6e508203) which is not ideal, but there seems to be no other way at the moment.

Check #5180 , #5335 as well.

another problem, I need some sort of "proxy", so when I have component tree that looks like this

Users
- UsersList
- UsersDetail

Where Users is not terminal, I'd be able to show breadcrumb that looks like this UsersList -> UsersDetail.

As in uiBreadcrumbs I wanted to do that by defining some sort of breadcrumbsProxy: <something> on data of Users route. Which would require searching thru all routes and get one that matches <something>. Since there's no way to access the whole route tree, the only possible way I came up with was using router.recognize(url), so my breadcrumbsProxy looks like this breadcrumbsProxy: '/users/list'... BUT!

Apparently router.recognize('/users/list') does not return instruction for UsersList, but rather for Users with UsersList as a child.. which is kinda useless.

So, what would make it easier would be a way to search for a router by something.. say linkParams perhaps? So I'd do

router.getInstructionByLinkParams(['Users', 'UsersList']) // returns instruction for UsersList route

?

Another thing is how hard is it to actually get linkParams from instruction, so I can recreate the link in breadcrumb, what I'm currently doing is concatenating the instruction tree and manually composing the linkParams array like this https://gist.github.com/fxck/108dccf4529becf9bc92#file-breadcrumb-ts-L76 it's gonna be even worse when I manage to get that proxy working, since I'll have to keep two arrays of instructions, one "real", for generating UsersDetail linkParams, one "fake", for proxied UsersList.

It would be really great if I could just pass instruction to router and get back linkParams.. so something like

router.getLinkParamsFromInstruction(<instruction>) // returns ['Users', 'UsersList']

Yep, this is something we want to do, but haven't gotten to yet. 👍

Looks like this is actually implemented, only the docs are wrong.

router.generate(['something', 'child']) does generate instruction instead of url, contrary to the docs which reads Generate a URL from a component name and optional map of parameters. The URL is relative to the app's base href.

Unfortunately .generate(['/Users/UsersList']) does the same thing as .recognize('/users/list').. which is to return parent instruction (Users) with the instruction I'd expect, as a child... sucks

@btford

@btford great, thank you, I am waiting for it. "Accessing route name from instruction" is very important feature (not only for breadcrumb component).

Any updates on this guys ?

any? :)

yea use https://github.com/ngrx/store should be a breeze to make breadcrumb comp there

+1

@fxck

@fxck I'm using this recursive function to generate the array from the instrucion, works fine for me

export function getInstrucionArray(ins): any[] {
  let arr = [ins.component.routeName];
  if (!_.isEmpty(ins.component.params)) arr.push(ins.component.params);
  if (ins.component.terminal || !ins.child) return arr;
  else return arr.concat(getInstrucionArray(ins.child));
};

I'm using underscore to check if params is empty but it should work just fine with a custom check

@vagyriag could you give us more info or a plunkr of your solution :) I am addressing the same problem creating breadcrumb. thanks a lot

@tofful

@tofful
The function transforms an instruction object into an array you can pass to the router.navigate function.
It just go into the nested object adding the component name and params to an array until it finds the terminal component or the instruction has no child component.

If you want to create breadcrumbs from that you could just map the array to get the user-friendly route names.

I just copied some instruction object from my app, you can see how it transform it to an array. JS Bin

We are no longer maintaining the deprecated router to focus our efforts on making the new router robust.

It doesn't look like the issue makes sense in the context of the new router. If you think it does, please reopen the issue.

For a solution that uses the new router, see http://stackoverflow.com/questions/38312417/angular2-router-get-route-data-from-url-to-display-breadcrumbs

Hi

I tried implementing breadcrumb component in my application and I was successful in it.
The only thing I want to know that, how to add child routes of a particular module.

Home
User
Manage User
Add User
Update user

The above is my routing structure.
User is a module under which there are several children components.

Now, what I want is, my breadcrumb to come like the below.
Home > ManageUser > Adduser (when I am navigating to Adduser from manageuser on a button click)
or, if I am updating
Home > ManageUser > Updtateuser(when I am navigating to UpdateUse from manageuser on a button click)

Please go through my application and provide me some solutions
https://github.com/Sunanda94/Breadcrumb

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

angular2/router breadcrumb component #5318

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

angular2/router breadcrumb component #5318

Description

Activity

fxck commented on Nov 17, 2015

fxck commented on Nov 17, 2015

btford commented on Nov 17, 2015

fxck commented on Nov 18, 2015

fxck commented on Nov 18, 2015

PavelPZ commented on Mar 13, 2016

afirdousi commented on Mar 19, 2016

sviat-barbutsa commented on Apr 6, 2016

fxck commented on Apr 6, 2016

leovrf commented on Apr 14, 2016

sebasgavi commented on May 7, 2016

tofful commented on May 27, 2016

sebasgavi commented on May 27, 2016

vsavkin commented on Jul 7, 2016

mrajcok commented on Aug 7, 2016

Sunanda94 commented on Mar 14, 2019

angular-automatic-lock-bot commented on Sep 14, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions