angular 2: Reload same component again when redirect on the same route

Question

I am using 'routerLink' to navigate my routes and it is working fine. But when I click again on the same button, I want that component will load again. But currently, it's not working in angular2.

app.component.html

<ul class="nav navbar-nav navbar-right">
            <li><a [routerLink]="['/events']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">All Events</a></li>
            <li><a [routerLink]="['/events/new']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Create New</a></li>
</ul>

I want, When I click on 'All Events' tab, again and again, events component load every time.

How to achieve this scenario in angular2 ?

please look at this post its similar https://stackoverflow.com/questions/47855240/angular-force-load-of-same-route?noredirect=1&lq=1 — Arun Gopinathan, Jan 26 '18 at 16:47

score 6 · Answer 1 · answered Aug 25 '17 at 06:04

I want, When I click on 'All Events' tab, again and again, events component load every time.

This is Not Possible in angular2, reason is once you load any component that component is only reload once you navigate from another route to that route again.

But you can reload forcefully

Basically there are two methods which are

you can call ngOnInit() method again and again as per need, which is not a recommended way
you can call one commonn method from ngOnInit() and later as per need call that function again like this
```
ngOnInit(){
    this.callingFunction();
}

forLaterUse(){
    this.callingFunction(); 
}
```

Another way is if you want to load same component on param change you can use this in constructor

this.route.params.subscribe((params: Params) => {
    console.log(params); 
    this.callingFunction();
    // this will be called every time route changes
    // so you can perform your functionality here

});

this is different question just strikes now, Is there any chance of restricting to load component on navigating from other route to same route ?. — k11k2, Jul 12 '18 at 06:29

Anonymous · Answer 2 · 2018-07-19T16:08:22.663

5

This github link below has the right solution https://github.com/angular/angular/issues/13831

Put the below code in the constructor of the component which you want to load

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.router.events.subscribe((evt) => {
  if (evt instanceof NavigationEnd) {
    this.router.navigated = false;
    window.scrollTo(0, 0);
  }
});

edited Jul 19 '18 at 16:08

answered Jul 19 '18 at 16:06

Anonymous

51
1
4

score 1 · Answer 3 · answered Aug 25 '17 at 06:09

1

See here: How to reload the current route with the angular 2 router

To summarize - its not a function that is built into the router. It sounds like the best option is using a service that will refresh or re-fetch any relevant data, and if anything changes, Angular will automatically update the view.

If someone says something is not possible in Angular, that is almost always not true. Its just not possible using currently existing solutions. ;-)

answered Aug 25 '17 at 06:09

diopside

2,981
11
23

`If someone says something is not possible in Angular, that is almost always not true` dude but according to scenario its not possible in angular's way. – Pardeep Jain Aug 25 '17 at 06:11
1

Yes i was just being cheeky. :-p. You did provide solutions after all – diopside Aug 25 '17 at 06:12

angular 2: Reload same component again when redirect on the same route

3 Answers3