Angular 5 – multiple routes same controller

Issue

I’ve got routes defined like this:

const routes: Routes = [
  { path: '', component: StartComponent},
  { path: 'route1', component: StartComponent},
  { path: 'route2', component: StartComponent},
  { path: 'route3', component: StartComponent}
];

Now if I navigate from route1 to route2, my StartComponent will be recreated. Is there any way to prevent angular doing that?

I’ve got some animations in this component and I need to switch between this routes without recreating my component.

Solution

const routes: Routes = [
  { path: '', redirectTo: 'route1', pathMatch: 'prefix'},
  { path: 'route/:routeId', component: StartComponent},
];

This should prevent the destruction of your component

Answered By – user4676340

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.