0

I have a route with two parameters in it and Im trying to update it (just the url, forget about the content of the component, also I dont want to refresh the page or anything, just update the route) but I cant do that. My routing:

const routes: Routes = [
{ path: "levs", component: MainComponent },
{ path: "levs/:levType", component: LevDetailsComponent },
{ path: "levs/:levType/:levId", component: EntityDetailsComponent }
];

So when Im in EntityDetailsComponent and my url is: levs/someLev/someLevId I have a list of other entities. When clicked, I want to update the url like this: levs/clickedLev/clickedLevId. I tried to do it from html with router link:

<li [routerLink]="[type.entityType, type.entityName]">lev</li>

or

<li [routerLink]="['/levs', type.entityType, type.entityName]">lev</li>

but in both cases it seems to be addding it to existing route like this: levs/someLev/someLevId/levs/clickedLev/clickedLevId I tried from EntityDetailsComponent.ts with router:

this.router.navigate('/levs',[this.entityType, this.entityIdentifier]);

And also without levs before parameters but the result is the same.

I found this solution: Update routeparams in angular 5

but these guys, they are just adding numbers to the route, I dont want to increment my parameters but change them, their approach doesnt work for me. Any help would be appreciated!

SOLUTION Thanks @armandyjoe for help. This worked for me, I just had to adjust passed url and use replaceURL true.

this.router.navigate(["/dct/levs/", this.entityType, this.entityIdentifier], { replaceUrl: true });

MWPodgorni
  • 83
  • 2
  • 9

1 Answers1

2
this.router.navigate(['/yoururl'], { queryParams: { type: someVariable, entity: someVariable } });

Hope this help!

Regards

armandyjoe
  • 123
  • 2
  • 10
  • But what 'yoururl'? the whole url? – MWPodgorni Oct 27 '19 at 22:55
  • Oh you don't want parameters. Now I've seen that you wanted to just create a full new URL like 'levs/clickedLev/clickedLevId'. In this case you could just use: this.location.replaceState('levs/clickedLev/clickedLevId'); – armandyjoe Oct 28 '19 at 07:57
  • I do want to update two parameters, but I already have them in the ts file, so I just dont know how to use router to replace them. Could you provide an example? I cant figure it out, even with the `replaceUrl` property it still shows the same problem – MWPodgorni Oct 28 '19 at 08:15
  • Please checkout https://www.jeffryhouser.com/index.cfm/2019/4/23/How-do-I-change-the-URL-in-an-Angular-Application-without-reloading-the-Route – armandyjoe Oct 28 '19 at 09:34
  • I solved it and added solution to the question. Thanks for help! – MWPodgorni Oct 28 '19 at 11:41