Angular component reloads when navigating-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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