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

11

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

edited Nov 26, 2019 at 6:26

answered Nov 26, 2019 at 6:12

Plochie

4,1271 gold badge21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mohammad Fareed Over a year ago

Now its redirecting to home page instead of refreshing

Plochie Over a year ago

whats the route for component, which you need to refresh?

Mohammad Fareed Over a year ago

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

Prajakta Hali Over a year ago

This is a great solution ! Worked for me.

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

0

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

answered Nov 26, 2019 at 6:26

Jalpesh Vadgama

14.4k21 gold badges75 silver badges95 bronze badges

Collectives™ on Stack Overflow

Angular refresh component

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related