Angular2 force component to reload on routing even if url wasn't changed

0
votes

On my page, there is a button that on click changes the routing with parameter according to the user's input.

Note: this form is always on the top of the page

HTML:

<form [formGroup]="houseFrom">
    <input type="text" placeholder="ID" formControlName="id">
    <button (click)="openHouseDetails()">Go</button>
</form>

Component:

openHouseDetails(){
   const form = this.houseFrom.value;
   this.router.navigate(['chen/house',form.id]);
}

app-routing:

...
path:'chen',
children:[
   {path:'house/:id', component:HouseComponent}
   ...
]

In the HouseComponent > ngOnInit method, there is a call to some service with the parameter that was sent with the routing.

Now here is the issue:

If the user inserts id and clicked the button, the URL is changed ok and the HouseComponent is loaded fine.

BUT if the user now clicks again on the button, with the same id, the URL is not changed (which is fine), but because of the this, the component is not loaded again, so the ngOnInit is not being called again.

This is not expected behavior for us because the service that is being called in the ngOnInit of the HouseComponent can return different details after a while so it should call the service again each time the button is clicked.

How can I force the component to reload even if the URL was not changed?

2
angular
what about this ? – sTx

2 Answers

0
votes

You can call your service after navigate like this:

this.router.navigate(['chen/house',form.id])
  .then(() => this.callYourService());

or

this.router.navigate(['chen/house',form.id])
  .then(() => this.ngOnInit());
-1
votes

Try window.reload 

openHouseDetails(){
   const form = this.houseFrom.value;
   if(!this.router.url.includes(`chen/house/${form.id}`))//check if user is on current page
   this.router.navigate(['chen/house',form.id]);
   else
   location.reload()
}