4

Looking for some advice on why a route change to the same component in my Angular 2 application is reloading the component.

I have 2 routes, both with the same component:

  • /home
  • /home/:id
const appRoutes = [
    {path:'', redirectTo:'/home', pathMatch:'full'},
    {path:'home', component: HomeComponent},
    {path:'home/:id', component: HomeComponent},
];

When changing between the two routes, the component is reloaded. When changing the parameter on the second route, the component is not reloaded (as expected).

Is there any way of being able to change between these routes without reloading the component, just as changing the parameter does?

Check out this Plunker to see what I mean

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
alexjones62
  • 73
  • 3

1 Answers1

2

I have the same issue so here is my solution. Hope it helps.

    {
      path: '',
      redirectTo: 'home/',
      pathMatch: 'full',
    },
    {
      path: 'home',
      redirectTo: 'home/',
      pathMatch: 'full',
    },
    {
      path: 'home/:id',
      component: HomeComponent,
    }
Свободен Роб
  • 2,579
  • 2
  • 20
  • 26
  • This works well. I think the only flaw is that it is technically redirecting to "home/0", not just "home/". Which is fine if 0 is not a valid id and you can just tell your code to ignore an id of 0. – alexjones62 Jan 31 '17 at 11:08