How to reload the component of same URL in Angular 2?
Navigate to some dummy component and then navigate to the component that you want to reload.//the second parameter _skipLocationChange=true to avoid that url in back button
this.router.navigateByUrl('/DummyComponent', true);this.router.navigate(["Landing"]);
this.router.navigateByUrl('/DummyComponent', {skipLocationChange: true}).then(()=>this.router.navigate(["Landing"]));
I managed to implement reloading a component by using PlatformLocation:onPopState and NgZone:run in the constructor. It was a work around, but atleast it worked the way it was required.
constructor( private route: ActivatedRoute, public router: Router, private platformLocation: PlatformLocation, private ngZone: NgZone) { platformLocation.onPopState(() => { if(platformLocation.pathname.startsWith("/currentRoute")) { this.ngZone.run(() => { console.log("Reloading component"); }); } });}
onPopState
was used as the reloading was supposed to be triggered on browser back/forward button. Also the check for pathname
had to be used as the onPopState
method was getting invoked on back/forward in any routes as the component is injected.