I have a component that lists a series of data and needs paging, because the list of data can be long. I have implemented a simple paging using the route. For example:
http://localhost:50367/searchflights/2
Will give me the second page of data. Now if I type the url manually in the browser and press enter the component is forced to be recreated and for this reason the data are loaded in the constructor. But If I am already on the page of the component and via Router link change the url, only the url changes and the component is not recreated therefore data are not reloaded.
My paging consists in a simple list of links at the bottom of page:
<div>
<a style="display:inline-block" *ngFor="let page of pages" [routerLink]="['/searchflights/',page]">
{{page}}
</a>
</div>
If I click on one of the paging links, the route is changed accordingly but data are not reloaded. How can I force the recreation of the component or which event should I hook to in order to reload the data
You can subscribe to the route parameters instead of loading data in the constructor.
this.route.params.subscribe(params => {
this.loadUser(params.id);
});