0

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.

Hazerd
  • 463
  • 1
  • 6
  • 21
  • The `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 indicates `zone.run()` would be necessary. – Günter Zöchbauer Nov 07 '16 at 14:25
  • I don't really understand what problem you try to solve but I guess either a resolver or a shard service will do what you need https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard, https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service – Günter Zöchbauer Nov 07 '16 at 14:26
  • The problem is that the component does not re-render when a new UserData is fetched from the server – Hazerd Nov 07 '16 at 14:36
  • And it does when you use `zone.run()`? Then either there is something wrong with your code or the service fulfills the criteria I mentioned above. – Günter Zöchbauer Nov 07 '16 at 14:37
  • No, zone.run() is just something I tried to make it re-rerender. So basically I have a component that is used for different routes and it retrieves data based on the current route, afterwards it passes that data to it's child components and those child components do not re-render when the data changes. – Hazerd Nov 07 '16 at 14:42
  • If this also doesn't help then the problem might be in ``. Hard to tell without a running example to debug. Can you reproduce in a Plunker? – Günter Zöchbauer Nov 07 '16 at 14:43
  • The `` only receives `UserDetails` as an object and it builds itself and it's child components based on the properties of that objects. Is the something like `@InputChanged' that I should use ? I'm working on that plunker right now – Hazerd Nov 07 '16 at 14:55
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127549/discussion-between-hazerd-and-gunter-zochbauer). – Hazerd Nov 07 '16 at 14:59

0 Answers0