Angular does not allow to reload the component the when the parameter in the route changes. Eg: Take our route as /user/:id the first loading ( /user/1 ) the component works fine but when the id changes ( /user/2 )angular just updates the URL but not the component .So this can be fixed by the following ways.
Reading from the Snapshot
First and the simplest way to do that is reading them from the snapshot of the active route i.e. inject the instance of ActivatedRoute into your component’s constructor or pull it from the Injector and read it from there i.e.
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user-detail',
templateUrl: 'user-detail.component.html'
})
export class UserDetailComponent implements OnInit {
constructor(private activeRoute: ActivatedRoute) {
}
ngOnInit() {
const queryParams = this.activeRoute.snapshot.queryParams
const routeParams = this.activeRoute.snapshot.params;
// do something with the parameters
this.loadUserDetail(routeParams.id);
}
}
But there is a little gotcha here. As the name snapshot specifies, these parameters are from the snapshot of the route at the first load of the component. These values will be calculated for the first load of the component and they won’t change unless you reload the page.
Why could it be a problem? Well let’s say you had a list of users on the sidebar and clicking any user loads this user detail component. It would work fine for the first time i.e. when none of the details were openend and you clicked any user and loaded the details for the first time. Now let’s say you want to open the details of another user, if you try and click the other one, it won’t work. Why? because the component is already loaded, angular is smart and won’t reload the component; it will just change the route params, which won’t have any affect on the component because we read from the initial snapshot and so we don’t have access to the update routed params.
So how can we fix this? Well we can do that by adding a listener to the route params.
Reading via Subscriptions
As discussed above, the snapshot won’t get updated if we try to reload the current route with different route parameters. Good news! apart from the snapshot, active route also provides the query and route parameters in the form of observables. We can subscribe to those observables and thus whenever the route params might get changed we will get notified in our subscriber and so we can load the user details.
Here is how it would look like in code:
ngOnInit() {
this.activeRoute.queryParams.subscribe(queryParams => {
// do something with the query params
}); this.activeRoute.params.subscribe(routeParams => {
this.loadUserDetail(routeParams.id);
});
}
Perfect! Now the query and route parameters are not bound to the snapshot and whenever you will click any user from the sidebar, the subscriber will get fired and the new details will be loaded.
Found this solution in https://kamranahmed.info/blog/2018/02/28/dealing-with-route-params-in-angular-5/
