What's the equivalent of state params (Angular 1 & ui-router) in Angular 2?

6
votes

In Angular 1 and ui-router I used states params a lot to pass data from one state to another (without using URL parameters). Is it possible in Angular 2?

Router, RouteParams, RouterLink and RouteData does not seem to handle this for instance I want to pass a user object from one state to another

<a ui-sref="home({user: myCtrl.user})">

this does not seem possible in Angular 2.

1
angularjsangular-ui-routerangular
RouteParams plays the same role as $routeParams or $stateParams. And $stateParams is used to change URL path and query parameters: github.com/angular-ui/ui-router/wiki/…. Quote: The $stateParams is a perfect way to provide your controllers or other services with the individual parts of the navigated url. – JB Nizet
Thanks for your reply, you could use $stateParams to retrieve data like Array or Object. Checkout the params API: angular-ui.github.io/ui-router/site/#/api/… "A map which optionally configures parameters declared in the url, or defines additional non-url parameters." I am interested in the "non-url parameters" – Shprink
I didn't know that was possible. But it seems like a bad idea to me anyway. If the parameters are not in the URL, refreshing the page won't work: the parameter values will be lost. – JB Nizet
You are right, I used this feature a lot to avoid getting data from the server when navigating. This speed up your app when you have data in memory. In the case of a reload, you can retrieve your server data. If you want to see it in action you can click on a user in this page: app.trendingdevs.com/world the user being already in memory going to his page is instantaneous (if you happen to open directly the user page, the data will be fetch from the server) – Shprink
Wouldn't a service that caches the server data be a better pattern here? – Ionut Costica

1 Answers

-1
votes

If you're using Angular 2 router, you can pass the state via @RouteParams, for example,

<a [routerLink]="['/ProductDetail', {id: 1234}]">Product Details</a>

In this case id is your state, and it can be any object, e.g.: 

<a [routerLink]="['/ProductDetail', myStateObject]">Product Details</a>

On the other hand, Angular 2 has a mechanism for passing parameters using binding to component's @Input() parameters, but this can be used only within the same route.