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 ?

Answer 1

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

});