Making Angular 2 params optional, so that it doesn't show in URL.

Question

My issue is closest to THIS POST. But, it'a slightly a different scenario.

SCENARIO

I have 2 pages main and detail.

To visit the main page, I visit http://localhost:3000/main
To visit the detail page, I visit http://localhost:3000/detail

Now, in the main page, I have a drop-down the has initially no value selected.

And, in the details page I have a BACK link that points back to main page

CODE

ROUTES

{
  path: 'main',
  component: SomeComponent
},
{
  path: 'main/:dropdown_value',
  component: SomeComponent
}

DETAIL TEMPLATE

<a [routerLink]="['/main', selectedDropDownValue]">BACK</a>

The selectedDropDownValue comes from component and contains the dropdown's selected value from the main page.

PROBLEM

The above implementation works like charm. So, when I hit back the main page, based on the params I passed, I re-select the last selected dropdown value. But, now the main URL becomes:

http://localhost:3000/main/abc

Here, abc is the selected dropdown value

But, I want the URL to stay like

http://localhost:3000/main

It shouldn't show /abc at the end

score 0 · Answer 1 · answered Nov 29 '17 at 12:06

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.

You can pass the data like this:

[routerLink]="['/ProductDetail', {id:1234}]

The configuration route:

{path: 'product/:id', component: ProductDetailComponentParam ,
                      data: [{isProd: true}]}

Get the data:

constructor(params: RouteParams, data: RouteData){
        this.productID = params.get('id');

        console.log("Is this prod environment?" + data.get('isProd'));
    }

Making Angular 2 params optional, so that it doesn't show in URL.

1 Answers1