0

Routes for my Module:

const routes: Routes = [
  { path: ":level1/:level2/:level3", component: CategoriesComponent },
  { path: ":level1/:level2", component: CategoriesComponent},
  { path: ":level1", component: CategoriesComponent},
  { path: "", component: CategoriesComponent },
];

the Categories component Generates some links like so:

<a [routerLink]="['category1']" [relativeTo]="activatedRoute">My Link</a>

the ngOnInit & ngOnDestroy are called each time it navigates between those routes.

What I need is the component to stay mounted and not re-init each time.

Stackblitz link to illustrate the difference between using QueryParameters and RouteParameters: Angular example

NOTE: Dont suggest RouteReuseStrategy: that isn't the answer we are looking for. I have another angular application that doesn't reload the component between routes. And this is the official expected behaviour.

Sebastian Scholle
  • 395
  • 1
  • 10

2 Answers2

0

You need to dive into a RouteReuseStrategy and create your custom strategy with saving touched pages Docs

Yan Koshelev
  • 1,059
  • 1
  • 5
  • 10
0

RouteReuseStrategy allows you to tell Angular not to destroy a component, but in fact to save it for re-rendering at a later date. https://stackoverflow.com/a/41515648/15439733

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33