Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router navigate with Route Data #5217

Closed
tbragaf opened this issue Nov 10, 2015 · 25 comments

Comments

Projects
None yet
@tbragaf
Copy link

commented Nov 10, 2015

Is it possible to navigate to an URL and give a json object to it?
As:

// exactly like @RouteConfig
this.router.navigateByUrl('/path', { data: { entity: 'entity' } })

Best regards,
Tiago Braga

@mhevery

This comment has been minimized.

Copy link
Member

commented Nov 15, 2015

Not supported. What exactly would you expect to happen?

@tbragaf

This comment has been minimized.

Copy link
Author

commented Nov 15, 2015

I need to navigate to a component and send data to it dynamically.
So I can't use RouteConfig to do so, right?
Or I can change the RouteData dynamically?

@mhevery

This comment has been minimized.

Copy link
Member

commented Nov 18, 2015

@btford can you help?

@viperguynaz

This comment has been minimized.

Copy link

commented Dec 31, 2015

looking to do the same - any help here? other options? Basic problem is parent gets data from an API and needs to send data to child after subscription.

@matteosuppo

This comment has been minimized.

Copy link
Contributor

commented Jan 1, 2016

Is there a reason why a Service would not be useful in this case?

@tbragaf

This comment has been minimized.

Copy link
Author

commented Jan 1, 2016

@matteosuppo
I am currently using services to do so, but I always need to implement services to do a simple and must have behaviour. Still I don't like to solve a problem with a workaround.

Also, what if I refresh the page? The service would lost its state.
However, with RouteData I can have a default data with the current RouteData implementation, and change it accordingly.

@adeteejay

This comment has been minimized.

Copy link

commented Jan 16, 2016

Is there a reason you want to navigate by url why not use the navigate method like this:

in RouteConf: { path: '/path/:data', name: 'Defined_Path_Name', component: PathComponent }
navigate with: this.router.navigate(['Defined_Path_Name', { data: { entity: 'entity' } } ]);

in /path: console.log(this.routeParams.get('data'))
that got me: Object {entity: "entity"}

@mbcooper

This comment has been minimized.

Copy link

commented Mar 4, 2016

NG 1 allowed us to "get" the state object and attach data to it, so we could then pull it off the $state.data object. . In all the examples I have seen, the data on NG2 routes looks to be static.

How do I attach data in a routeData param dynamically?

@tbragaf

This comment has been minimized.

Copy link
Author

commented Mar 4, 2016

@mbcooper Currently, you don't

@cipriantarta

This comment has been minimized.

Copy link

commented Jul 5, 2016

Is this issue on anyone's radar?
I have a component which calls for a list of items and when an item is clicked, my router will navigate to the details component. I can pass the item ID to the detail component and use the service to fetch the item, but I'd really like to avoid making a new API call and pass the item to the detail component via .navigate(), fom the list.
Is this currently possible in any way? RouteParams doesn't work here, because the object has a lot of properties.

@mahpah

This comment has been minimized.

Copy link

commented Jul 5, 2016

store it in yours service, you don't need to make a new API call

@cipriantarta

This comment has been minimized.

Copy link

commented Jul 5, 2016

@mahpah I was under the impression that a new instance of my service is being created every time the router navigates from one route to another.
Besides, I think that the service needs to be stateless. One can implement caching on a different layer, but that is another story.

@vicb

This comment has been minimized.

Copy link
Contributor

commented Sep 25, 2016

related to the old router

@vicb vicb closed this Sep 25, 2016

@cvharris

This comment has been minimized.

Copy link

commented Jun 8, 2017

Feel like this was closed very prematurely. I think there's plenty of valid use cases for it

@HIMISOCOOL

This comment has been minimized.

Copy link

commented Jun 21, 2017

It would be great to not have to add another field to a service when all I want to do is know the state of one variable, once, from the previous view, without making the url longer

@ghost

This comment has been minimized.

Copy link

commented Aug 7, 2017

I'd like to use this for a static page title when re-using existing components. Adding a service feels a little bit over powered.

@MattMorrisDev

This comment has been minimized.

Copy link

commented Feb 22, 2018

Yeah, I feel like this is a pretty common use case. I don't need to resolve the data, I already have it. I just want to pass it along to the route I'm navigating to.

Sure, we can make a service with the sole purpose of being a temporary state holder / transfer-er, but it just feels gross and unnecessary. Yes, paramMap exists, but it tries to serialize everything to the url (which I also don't need in this case), so it can't support complex/nested objects.

@Hipparch

This comment has been minimized.

Copy link

commented Feb 26, 2018

You can use this. Angular2+/4/5 - navigate with data https://github.com/Hipparch/Angular2-navigate-with-data

@earshinov

This comment has been minimized.

Copy link

commented Aug 6, 2018

@Hipparch , With all due respect, this feels more like a hack. For a problem that is so common one would expect a supported and well-tested solution built into Angular.

@earshinov

This comment has been minimized.

Copy link

commented Aug 6, 2018

@vicb, Sure it relates to the old router, but it relates to the current router just as well. Please reopen this ticket. Otherwise another ticket should be opened for the current router.

@earshinov

This comment has been minimized.

Copy link

commented Aug 6, 2018

List of tickets about passing data with router.navigate:

Currently all the tickets are closed (except #10248 which addressed only a part of the problem), and the issue is still here.

@andreaslarssen

This comment has been minimized.

Copy link

commented Sep 5, 2018

+1

@Virendra-Yadav

This comment has been minimized.

@Virendra-Yadav

This comment has been minimized.

Copy link

commented Nov 14, 2018

looking to do the same - any help here? other options? Basic problem is parent gets data from an API and needs to send data to child after subscription.

try https://www.npmjs.com/package/ngx-navigation-with-data

@jasonaden

This comment has been minimized.

Copy link
Contributor

commented Dec 3, 2018

See #27198 for an implementation that supports this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.