javascript - How to reload a component in Angular without reloading the whole page

Question

I want to reload a route but without reloading the entire page. This is not what I want:

window.location.reload();

I want to reload just the component not the page. This is waht I tried:

1. Angular: Change the route without reloading
2. Angular: Refetch data on same URL navigation

Some other random tricks also I tried. Tried following code from this URL:

1. Angular Basics: Refresh an Angular Component without reloading the same Component

   mySubscription: any;
   
   constructor() {
     this.router.routeReuseStrategy.shouldReuseRoute=function() {
       return false;
     }
   
     this.mySubscription= this.router.events.subscribe((event)=> {
       if(event instanceof NavigationEnd) {
           // Trick the Router into believing it's last link wasn't previously loaded
           this.router.navigated=false;
       }
     })
   }
   

But It's not working due to other reasons. I need a solution. Please suggest something else.

Answer 1

the skipLocationChange option works for me，try my service

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class ReloadRouteService {

  constructor(
    private router: Router,
  ) { }

  redirectTo(url: string): void {
    // When skipLocationChange true, navigates without pushing a new state into history.
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([url]);
    });
  }
}