1

Well, I did some research before asking this question. I thought this is very straight forward as this common scenario.

This is my anchor tag. 

  <a [routerLink]="['./product', 1]">Vitamins</a>

When use click on that I am getting data by passing the Id to Web API. After getting data, the Url shows up as http://localhost:4200/product/1.

In my route, I configured this as 

{ path: 'product/:id', component: ProductComponent },

I would like to modify this URL as http://localhost:4200/vitamins which makes more sense. How can I do this ?

The closest I found is this but this is not what I am looking for

Angular 2 : routing without changing URL

Chatra
  • 2,989
  • 7
  • 40
  • 73
  • as long as the name is unique, you can use the name as id. – Robin Dijkhof Jun 22 '17 at 13:57
  • @RobinDijkhof Name is not unquie. Even thoug it is unique, I think I will get it as http://localhost:4200/product/Vitamins. but I dont want product in between. Thanks – Chatra Jun 22 '17 at 13:59
  • 3
    or you can do `{ path: 'product/:productName/:id', component: ProductComponent }` – Yordan Nikolov Jun 22 '17 at 13:59
  • 1
    from `http://localhost:4200/vitamins` how will the router know that you want to load `ProductComponent` to outlet? You can use `product/:productName` by mapping names to ids. – sabithpocker Jun 22 '17 at 14:00
  • you can change your path to `{ path: 'vitamins', component: ProductComponent }` `Vitamins` notice the removed brackets otherwise you get an `IllegalNumberException` in the server side – Haythem ROUIS Jun 22 '17 at 14:02
  • I dont think that this is a good idea, because you have to put route for each product. – Yordan Nikolov Jun 22 '17 at 14:03
  • @YordanNikolov Agree with you that giving path is not a good idea. as mentioned by Haythem. I tired your product/:productName/:id still it is giving the id in the url like http://localhost:4200/product/Vitamins/1 – Chatra Jun 22 '17 at 14:09
  • What's the problem to have and an ID in the URL. I think that until you have the name of the product, which is better for the SEO, it doesnt make sanse that you have and the ID. You may structure the URL how you want ... `/product/productName-productId` .... it's up to you – Yordan Nikolov Jun 22 '17 at 14:13
  • @YordanNikolov I dont want user to see the Id's in URL. I want the URL to be easy to type – Chatra Jun 22 '17 at 14:21
  • I dont think that there's a easy way to do that. I don't believe that you have products with unique names, if I'm wrong, you can do it only with name in the URL – Yordan Nikolov Jun 22 '17 at 14:33

2 Answers2

1

Try using Location object.

import { Location } from '@angular/common';

constructor(public location: Location) {}

And when you want to update the window URL without redirecting or navigating with router object, put this:

this.location.go('vitamins');

This should write 'vitamins' after your base url.

Khalav
  • 77
  • 7
  • Not sure whether this is a good way to do it or not. I observed that the Url is first showing as http://localhost:4200/product/1 and then changing to http://localhost:4200/vitamins. User can see that blinking – Chatra Jun 22 '17 at 14:19
  • And the other thing I observed is User cannot type Website.com/Vitamins – Chatra Jun 22 '17 at 14:22
  • You could try to use this in your ngOnInit method. Otherwise, when do you have to switch the url? -- Edit Then you should implement a new route with Vitamins – Khalav Jun 22 '17 at 14:23
0

I probably would just link to <a [routerLink]="'/product'">Vitamins</a>. Make it optional and handle this case in your component or service (if no id is passed, set it to 1)

In other cases you probably want the url to look like http://myexample.com/vitamins/2 otherwise a direct link wouldn't be possible (or how would you pass the params otherwise?) for example if you wan't to bookmark the url or make a hard reload.

A hacky way would be to use location.go('/vitamins'); (Location Docs) which will change the url in your address bar, but won't trigger any route changes of the angular router. I call it hacky, because it can have sideeffects such as the bookmarking / reload problem if you're on a specific route (of course you could solve this in another way, lets say temporarily saving the current route param in localStorage).

Hope i could help.

malifa
  • 8,025
  • 2
  • 42
  • 57