Angular 2 reload route on param change

Question

I am currently writing my first Angular 2 Application. I have an OverviewComponent which has the following simple template:

Answer 1

I didn't find that any of these was a good and thorough solution for Angular 8. Some suggestions ended up creating infinite loops that resulted in, ahem, a stack overflow. Others are just too hacky for my tastes. I found a good solution online but since I can't post just a link here, I'll do the best to summarize what I did based on the link and why I think it's a solid solution. It allows you to just affect certain routes that need the behavior and not others and you don't need to roll any custom classes to make it work.

From Simon McClive's solution at https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

First, modify your app-routing module configuration:

@ngModule({ imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
exports: [RouterModule] })

Next, modify the routes you want to affect. If you aren't using authentication you can omit the canActivate parameter:

export const routes: Routes = [
 {
   path: ‘invites’,
   component: InviteComponent,
   children: [
     {
       path: ‘’,
       loadChildren: ‘./pages/invites/invites.module#InvitesModule’,
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: ‘always’, //there are three options for this - see Simon's post. 'Always' is the heaviest-handed and maybe more than you need.
 }
]

Lastly, update your class to listen for the navigation event and act accordingly (being sure to unregister the listener on the way out):

export class AwesomeComponent implements OnInit, OnDestroy{

 // ... your class variables here
 navigationSubscription;

 constructor( private router: Router ) {

   // subscribe to the router events and store the subscription so
   // we can unsubscribe later

   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // If it is a NavigationEnd event, re-initalize the component
     if (e instanceof NavigationEnd) {
       this.myInitFn();
     }
   });
 }

 myInitFn() {
   // Reset anything affected by a change in route params
   // Fetch data, call services, etc.
 }

 ngOnDestroy() {
    // avoid memory leaks here by cleaning up
    if (this.navigationSubscription) {  
       this.navigationSubscription.unsubscribe();
    }
  }
}