0

I know I can do this

this.router.navigate(["/user-reviews"], username, userId, {skipLocationChange: true})

and the url won't change if I'm coming from

http://localhost:4200/main

and using skipLocationChange, but what I want it to say is http://localhost:4200/user-reviews/bob

How do I do it so that it only hides the userId parameter, but not the username and still retains the new path user-reviews instead of main? Is this possible? I appreciate any help!

user6680
  • 79
  • 6
  • 34
  • 78
  • you could probably do something to accomplish this, like changing the url to to `reviews/bob` and then again with the id and skip locaton change, but... this probably isn't the track you want to go down. what about in the case of a page refresh? angular won't have track of what happened or why. skipLocationChange is a useful tool for cases where you want to take advantage of the router but want to be in the same place as when you started, not for obscuring parts of the url.. Maybe put more into the question about why you want to accomplish this and you can get a differnt route – bryan60 Apr 25 '20 at 18:42

1 Answers1

1

based on this post

you could easily do something like

ngOnInit()
{    
  this.location.replaceState("/user-reviews/something");
}

using location after navigate inside your component should do the trick.

JSmith
  • 4,519
  • 4
  • 29
  • 45
  • One issue though. If I refresh the page, then it resets the URL to just ```http://localhost:4200``` with nothing after it so it doesn't stay in the same route. – user6680 Apr 25 '20 at 20:39
  • Maybe you should put skiplocationchange to false – JSmith Apr 25 '20 at 21:41
  • If I set it to false, then the userId shows up, which I don't want – user6680 Apr 25 '20 at 23:07
  • @user6680 there must be something but usually (and I didn't tested it) but `replaceState` is supposed to replace the whole URL maybe you are having a problem with `ngOnInit` not triggerring properly. could you do a stackblitz to reproduce the error please – JSmith Apr 25 '20 at 23:17
  • The problem is that I'm using the id for a GET request on ngOnInit, but when you ```replaceState``` it removes that id after refresh. For example ```localhost:4200/main/username/userId``` to ```localhost:4200/main/username```. I refresh the page, but now I don't have the userId to do GET. I feel like I'm asking for an impossible thing lol, but I've considered localStorage. I'm just mostly concerned around the security aspect of exposing one's userId – user6680 Apr 26 '20 at 13:58
  • @user6680 use [Activated route](https://angular.io/api/router/ActivatedRoute) first. Grab the id and then place it into your new adress – JSmith Apr 26 '20 at 14:00
  • ActivatedRoute is something I don't fully understand yet. If I do the following ```ngOnInit() { this.userId= this.route.snapshot.paramMap.get("userId") alert(this.userId); this.location.replaceState("/user-reviews/" + this.username);``` Then it returns the userId in alert when I first click the route from original component. If I refresh page, the alert shows null. I'm having trouble understanding how to set the snapshot so that it appears on refresh. What am I missing? – user6680 Apr 26 '20 at 14:50
  • @user6680 please make a stackblitz. – JSmith Apr 26 '20 at 17:04
  • Here's a stackblitz I made: https://stackblitz.com/edit/angular-j8r2e1 – user6680 Apr 26 '20 at 18:49
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/212569/discussion-between-jsmith-and-user6680). – JSmith Apr 26 '20 at 18:52
  • @user6680 I'm in the chat – JSmith Apr 26 '20 at 18:53