Angular - redirect to same component with different parameter

Question

So in angular I've nested routing, lets say:

domain.com/dashboard/list/:listId/:listName/details/:detailsName/:detailsId

Dashboard is separate module
List is separate module
Details is separate module

Now, on details page, I've also small component with similar to list that I've on list page, and thats way I want also redirect user to the same details component but with different parameters.

So let's from :

domain.com/dashboard/list/1/test_list_name/details/test_details_name/4

to

domain.com/dashboard/list/1/test_list_name/details/another_test_details_name/8

RouterLink:

<h5 [routerLink]="['details', id, name]"></h5>

Unfortunately I'm always redirected to /dashboard. I tried it also with setting routeReuseStrategy to false. But without success.

What I'm doing wrong?

@Edit, stackblitz:

https://stackblitz.com/edit/angular-q8fasa

In stackblitz example I just want to open another dashboard-second component(with different parameters) from dashboard-second component. In this example I've used only one nested routing, but issues is exactly same.

Sorry for quite ugly example, but I believe you will understand my problem.

Can you include your appcomponent and routes you've configured? — Austin T French
– Austin T French, Commented Dec 11, 2018 at 20:16
It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one. — SiddAjmera
– SiddAjmera, Commented Dec 11, 2018 at 20:17
Use RouterModule.forRoot(routes, { enableTracing: true }) and look at what is in the console. I suspect it's trying to access details/details and you might have to change your router link to <h5 [routerLink]="['../details', id, name]"></h5> — Kevin Doyon
– Kevin Doyon, Commented Dec 11, 2018 at 20:27
It looks like you are passing the id before the name, but your route is declared as having the name, then the id — peinearydevelopment
– peinearydevelopment, Commented Dec 11, 2018 at 20:29
Name and Id are ok, i just made issue here on SO. I will try provide stackblitz asap. — PoorDeveloper
– PoorDeveloper, Commented Dec 11, 2018 at 20:42

Kevin Doyon · Accepted Answer · 2018-12-12 15:15:44Z

1

Using RouterModule.forRoot(routes, { enableTracing: true }), I see the following in the console:

Event: NavigationEnd NavigationEnd(id: 3, url: '/dashboard/dashboard-second/original-name-something-bla-bla/87/dashboard-second/other-name/11', urlAfterRedirects: '/dashboard') NavigationEnd {id: 3, url: "/dashboard/dashboard-second/original-name-something-bla-bla/87/dashboard-second/other-name/11", urlAfterRedirects: "/dashboard"}

So it has dashboard-second twice.

I had to change the routerlinks to:

<h5 [routerLink]="['../../../../dashboard-second', 'other-name', 11]" >Go to dashboard-second 1</h5>

It fixes the problem. The 4 .. is to go back to /dashboard. Each .. go to:

87 (ie: /87/.. = /87)
original-name-something-bla-bla
dashboard-second
/dashboard

It's a bit unintuitive that it takes 4 .., I thought it would have taken 3, but it makes sense because it's relative. So you end up doing:

/dashboard/dashboard-second/original-name-something-bla-bla/87/../../../../dashboard-second/other-name/11

which resolves to:

/dashboard/dashboard-second/other-name/11

You can also set an absolute path, with the caveat that if you move the route /dashboard-second around, it is more likely you have to update the routerLink when using absolute paths:

<h5 [routerLink]="['/dashboard/dashboard-second', 'name-name-name', 13]" >Go to dashboard-second 3</h5>

answered Dec 12, 2018 at 15:15

Kevin Doyon

3,5882 gold badges35 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PoorDeveloper Over a year ago

So now the ULR change properly, but the component is not reloaded. But thank you anyway!

PoorDeveloper Over a year ago

Ok, about that reloading it was my mistake actually. Anyway thanks for your anserw, I've marked it as correct one. :)

Kevin Doyon Over a year ago

Np! if you want to reload a dashboard when someone clicks on a link pointing to the same dashboard, you might want to set onSameUrlNavigation to reload inside RouterModule.forRoot. Otherwise clicking the link won't do anything (which might be completely fine, just depends on what you want to do)

Collectives™ on Stack Overflow

Angular - redirect to same component with different parameter

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related