How to pass parameter between states not in a url?

Question

I am wondering how can I pass parameters, that won\'t be visible in URL?

As of now I have:

{path: \'/editUser/:userId\', name: \'Edit User\', compone         


        

Answer 1

Good Question !

I don't know exactly how to do that but yes I know alternate of same so posting as answer may to help someone.

Basically There are two options (up to my knowledge) to send data via routing

• RouteParams (as used in question)
• data (property at the time of routing)

RouteParams

Now when we send data using RouteParams we have to define in the similer way like this:

{path: '/editUser/:userId', name: 'Edit User', component: UserEditComponent}

<a href="#" [routerLink]="['Edit User',{userId: id}]"

By using this method we send data normaly but all data is visible in the URL

Data

when we don't want to show data in the URL path than we have to send data via routing using data property of the @RouteConfig annotation provided by angualr2. by using this property we can send additional data to the components at the time of the route configuration without showing it in the URL. here is example of this property.

@RouteConfig([
    {path: '/product/:id', component: ProductDetailComponentParam,
     as: 'ProductDetail', data: {isProd: true}}])

export class ProductDetailComponentParam {
    productID: string;
    constructor(params: RouteParams, data: RouteData) {
        this.productID = params.get('id');
 
        console.log('Is this prod environment', data.get('isProd'));
    }
}

by using this we can send data via routing without showing in the URL. working example of same: http://plnkr.co/edit/N5IzUH0pc3nN1O7iQZkD?p=preview]

for more info read out this awesome article