Reload Angular 4+ route with the same URL parameter

Question

I've been doing some research into reloading an Angular 4+ route and it looks as if the preferred method is to instead listen to URL parameter changes within the component and re-initialise the component there instead.

The issue I'm having is in trying to find a DRY (don't repeat yourself) approach to make this work across multiple components, when the URL would be identical (including parameters). In AngularJS this was simple with UI-router.

Use case:

I have a notification panel which can "float" above any route, when a notification is clicked it needs to go to the content it relates to - this can be many different types of content.

For example: /posts/:id or /groups/:id or /users/:id

If the user is already looking at that content it doesn't reload and refresh to reflect the message of the notification. I.e "John Doe commented on your post" (the user could be looking at an outdated version of that post) or "Jane Doe accepted your request to join Some Group" (the user could be looking at the guest view of that group).

I did look into using window.location.reload() when detecting that the route is the same, and that works, but it's highly undesirable due to the overhead it causes (angular reinitialising, auth check, socket reconnection, etc).

Any suggestions would be greatly appreciated!

Answer 1

In this case your route doesn't change, just your parameters change.

To solve this problem you need to subscribe to the ActivatedRoute params.

export class MyClass implements OnInit {
   constructor(private activatedRoute: ActivatedRoute ) {
        this.activatedRoute.params.subscribe((params)=>{
          console.log('updatedParams', params);
        });
    }
}

Answer 2

You have to subscribe route params so that whenever it changes we can handle changes. Below is sample code from my project which is working perfectly fine.

constructor(private router: Router) {
    this.route.params.subscribe(params => {
      this.initializePage(params['id']);
    });
}

initializePage(id:any){
//..Your code
// Consider this as your ngOnInIt() method and initialize everything here.
}

Here when param value changes in URL with same route it will not reload page but just change value as we are calling initializePage(id) which will re initialize everything.

Hope this help you.