Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 - replace history instead of pushing

How to replace a history instead a pushing a new in angular 2's new router (rc.1)?

For example Im in a question list (/questions) opening a new modal in a new route (/questions/add), and after adding a new question I go to the question view (/questions/1). If I press back I would like to go to the /questions instead of /questions/add

like image 821
pleerock Avatar asked Aug 11 '16 08:08

pleerock


1 Answers

If you use

router.navigate 

And then

location.replaceState 

With the exact same path, you can trigger changes that usually happen, as well as replacing the history.

For example, in your case:

this.router.navigate(['questions/1']); this.location.replaceState('questions/1'); 

If you need to add parameters to the route, you can create the url for location using

router.serializeUrl(router.createUrlTree(/* what you put in your router navigate call */)); 

In your example:

this.router.navigate(['questions/1', {name:"test"}]); this.location.replaceState(this.router.serializeUrl(this.router.createUrlTree(['questions/1', {name:"test"}]))); 

Update

It seems the angular router now comes with a replace url option. In your example:

this.router.navigate(["questions/1"], {replaceUrl:true}); 

Update 2

There is a current issue where multiple navigations done in a short amount of time may not replace the URL correctly. As a temporary workaround, wrap the navigate function in a timeout to get each to fire in a separate cycle:

setTimeout(()=>{     this.router.navigate(["questions/1"], {replaceUrl:true}); }); 
like image 183
Jason Avatar answered Nov 01 '22 20:11

Jason