I have a component which I want to re use for different router links and to reload it with server data based on the link param. From what I've seen at the moment it is suggested to have your get inside an ng zone in order to trigger the re-render of the components and its children.
I am also passing the object from the http request further down to child components.
This is the component onInit code:
ngOnInit(): void {
this.route.params.forEach((params: Params) => {
let id = +params['id'];
this._userHttpService.getUserData(id)
.subscribe(UserData=>
this._ngZone.run(() => this.UserData= UserData)
);
});
}
And this is the mark-up
<div *ngIf="UserData">
<div class="container-fluid">
<h3>{{UserData.Id}}</h3>
<user-tiles [UserData]="UserData"></user-tiles>
</div>
</div>
Routes work fine, the correct data is retrieved from the server and the contents inside the <h3>get updated after a second but the "user-tiles" components does not re-render. UserData is an @Input inside user-tiles.
zone.run()is only necessary if some code runs outside Angulars zone. For example if you use a service that is not initialized from within Angular but before the Angular2 app was bootstrapped or when a service doesn't work well with Angular2. In your example I don't see anything that indicateszone.run()would be necessary.zone.run()? Then either there is something wrong with your code or the service fulfills the criteria I mentioned above.