Angular 9 - Refresh page while redirecting to the same URL, triggering only the API call specific to the current page

Question

Is there a way to redirect to the same URL and also refresh the page without calling all APIs from the beginning of the application? I have attempted using an anchor tag with href, but it results in refreshing the entire page and fetching all APIs again. In AngularJS, we typically use state.go where the entire page is not refreshed. For example: http://localhost:4200/user/27b3bcd3-5de9-4ca6-b2c9-d8ad708518fd/details/main If this is the details page containing a button that should display another user's details upon clicking, http://localhost:4200/user/985b97cd-fad4-4194-abd5-adbd9bfa056b/details/main

In Angular 9, I have experimented with routerLink and Router.navigate methods, but only the ID is updated in the URL without refreshing the page.

Answer 1

Answer №1

In order to achieve a true page refresh, the proper method is to utilize document.location.reload(); as opposed to relying on the router.

Answer 2

In order to achieve a true page refresh, the proper method is to utilize document.location.reload(); as opposed to relying on the router.

Answer 3

Here's a solution that worked for me in a similar situation: Navigate to the page you need and then refresh it.

  this.router.navigate(['/'])
       .then(() => {
           window.location.reload();
        });

Answer 4

Here's a solution that worked for me in a similar situation: Navigate to the page you need and then refresh it.

  this.router.navigate(['/'])
       .then(() => {
           window.location.reload();
        });

Answer 5

To refresh the current navigation URL, simply add window.location.reload(); inside a function that triggers upon clicking a button.

Answer 6

To refresh the current navigation URL, simply add window.location.reload(); inside a function that triggers upon clicking a button.