I am currently writing my first Angular 2 Application. I have an OverviewComponent which has the following simple template:
Another alternative that should be added here is to provide a RouteReuseStrategy to your module.
providers: [
{
provide: RouteReuseStrategy,
useClass: AARouteReuseStrategy
}
]
The default behaviour of the router is to reuse the route if the configuration is the same (which is the case when only changing the :id param in this question). By changing the strategy to not reuse the route, the component will be reloaded, and you do not have to subscribe to route changes in the component.
An implementation of the RouteReuseStrategy could be like this:
export class AARouteReuseStrategy extends RouteReuseStrategy {
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return false;
}
store(route: ActivatedRouteSnapshot, handle: {}): void {
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return false;
}
retrieve(route: ActivatedRouteSnapshot): {} {
return null;
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return false; // default is true if configuration of current and future route are the same
}
}
I've written some about it here too:
https://pjsjava.blogspot.no/2018/01/angular-components-not-reloading-on.html