Angular refresh component

Question

i have location drop down in top nav bar. on change location, i have to load entire application based on that location data, so i need to get all components data to be refreshed, that is why i am approaching this step.

core.js:5847 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'RefreshComponent' Error: Cannot match any routes. URL Segment: 'RefreshComponent'

constructor( private router: Router, ) { }

i have used javascript setTimeout(() => { location.reload(); }); it worked fine, i dont want to reload the page, just want to refresh the component i tried below code. but when i use console error is coming.

changeLocation(locationData) { this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => { this.router.navigate([this.router.url]); }); }

Am i missing any configuration .?

do you have a route definition for the path RefreshComponent? — ChrisY
– ChrisY, Commented Nov 26, 2019 at 6:05
Yes. As far as I see what you are trying to do is kind of a "hack" to be able to reload the whole component because you'r probably doing some data fetching in the ngOnInit there. Best practice though would be to just trigger a new fetching of current data and subscribe to them via Observables. Then you should not have to reload the component. — ChrisY
– ChrisY, Commented Nov 26, 2019 at 6:14
@ChrisY, i have location drop down in top nav bar. on change location, i have to load entire application based on that location data, so i need to get all components data to be refreshed, that is why i am approaching this step. — Mohammad Fareed
– Mohammad Fareed, Commented Nov 26, 2019 at 6:20

Plochie · Accepted Answer · 2019-11-26 06:26:25Z

You probally dont have RefreshComponent route in you route configuration.

As far as refresing your component goes, just modify your function as follows, you don't need RefreshComponent route.

Replace navigateByUrl('/RefreshComponent',... with navigateByUrl('/',...

changeLocation(locationData) { // save current route first const currentRoute = this.router.url; this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => { this.router.navigate([currentRoute]); // navigate to same route }); }

See, this.router.url i used current component. user can change location in top nav bar. its not specific to single component.

Jalpesh Vadgama · Accepted Answer · 2019-11-26 06:26:05Z

Here is the link you are looking for.

https://medium.com/@rakshitshah/refresh-angular-component-without-navigation-148a87c2de3f

As per the link.

mySubscription: any;

Add following in the constructor of your component.

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; } });

And make sure to unsubscribe to "mySubscription" like below

ngOnDestroy() { if (this.mySubscription) { this.mySubscription.unsubscribe(); } }

Collectives™ on Stack Overflow

Angular refresh component

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related