Angular 2 reload route on param change

angular, angular2-routing, typescript

Solution

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
});

Problem

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?

Original source

Related problems