Router navigate with Route Data

[tbragaf]

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]

Not supported. What exactly would you expect to happen?

[tbragaf]

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]

@btford can you help?

[viperguynaz]

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]

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

[tbragaf]

@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]

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]

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]

@mbcooper Currently, you don't

[cipriantarta]

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]

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

[cipriantarta]

@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]

related to the old router

[cvharris]

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

[HIMISOCOOL]

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]

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]

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.

[FreshTouch]

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

[earshinov]

@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]

@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]

List of tickets about passing data with router.navigate:

• Router navigate with Route Data #5217
• Passing parameters without adding them to URL #8515
• [Router 3.0.0-beta.2] "data" parameter exists in Route and unable to pass data dynamically #9804
• Router: Support Setting State Object When Navigating #10248 (this one is actually about location state)

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

[andreaslarssen]

+1

[Virendra-Yadav]

you guys can use https://www.npmjs.com/package/ngx-navigation-with-data

[Virendra-Yadav]

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]

See #27198 for an implementation that supports this.

[angular-automatic-lock-bot]

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.}