Angular 2 reload route on param change

Question

I am currently writing my first Angular 2 Application. I have an OverviewComponent which has the following simple template:

<div class="row">
  <div class="col-lg-8">
    <router-outlet></router-outlet>
  </div>
  <div class="col-lg-4">
    <app-list></app-list>
  </div>
</div>

when accessing the url / my router redirects me to /overview which then loads a map within the router-outlet. The <app-list> has a list of clickable items which triggers a <app-detail> to be displayed instead of the app component. Therefor I pass the id of the referring json file in the url like that: /details/:id (in my routes).

All of the above works totally fine. If I now click on one of the list items the details are shown, BUT when I select another list element the view doesn't change to the new details. The URL does change but the content is not reloaded. How can I achieve a Reinitialization of the DetailComponent?

Answer 1

As per the first final release, this is resolved.

Just pay much attention to correctly reset the state of the component when the parameter changes

this.route.params.subscribe(params => {
    this.param = params['yourParam'];
    this.initialiseState(); // reset and set based on new parameter this time
});