How to change to route with same component without page reload

Question

Angular 4.3.1

I have routes that look like this:

{ path: ':department', loadChildren: 'app/pages/pages.module#PagesModule' }

And pagesRoutes

{
  path: '',
  component: PagesComponent,
  pathMatch: 'full',
},
{
  path: ':id',
  component: PagesComponent,
}

Say I navigate to /department-name. The PagesComponent is loaded and I do a lookup to find the default page for the department and load the content. If I then navigate to /department-name/1, the PagesComponent is being initialized again and the screen reloads, I'd like to find a way to not have it reload between those two route changes. At this point, if I navigate to /department-name/2 the content changes without the page reloading like I want. Is there a way I can reorganize things so I don't experience a component reload when navigating between /department-name and /department-name/id?

I found this hack which I don't think can work since :department is a dynamically generated route. Unless there is a way for me to get that param inside the router config?

There is also this SO write-up that uses RouteReuseStrategy, but it uses a static array of possible routes to reuse. I could possibly do this if I can build that array from an HTTP call. I guess I could do that at initial app load?

Any better suggestions? Thanks for looking.

take a look at https://stackoverflow.com/questions/41393095/angular-2-route-parameter-changes-reload-the-same-page — Tim.Burnell, Aug 04 '17 at 13:53
Thanks, @Tim.Burnell. I think that question refers to the opposite problem I'm having. I am already subscribing to the parameters inside the PageComponent and that works great. The problem is the PageComponent gets re-initialized when I change routes from `/department` to `/department/1`, causing the page to redraw and ngOnInit to be called again. — andyrue, Aug 04 '17 at 14:41

score 2 · Answer 1 · answered Nov 18 '17 at 21:17

 // First import in your component:    
import { Router, NavigationEnd } from '@/router';

 // Then in your component class constructor use below code: 

constructor(private router: Router) { 
    this.router.routeReuseStrategy.shouldReuseRoute = function(){
      return false;
    };
    this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
            this.router.navigated = false;
        }
    });
  }

 // Finally in any of your method, where you want to refresh use below code
  for refresh
 any_method_name() {
    this.router.navigate(['/']);
 }

** NO Hack or something, its official solution for loading component without refresh. **

How to change to route with same component without page reload

1 Answers1