Angular component reloads when navigating

Question

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.

Answer 1

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

Answer 2

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