title: Angular 2 reload component based on activated route
body: <p>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.</p>
  
  <p>I am also passing the object from the http request further down to child components.</p>
  
  <p>This is the component onInit code: </p>
  
  <pre><code>  ngOnInit(): void {
      this.route.params.forEach((params: Params) =&gt; {
          let id = +params['id'];
          this._userHttpService.getUserData(id)
              .subscribe(UserData=&gt; 
                  this._ngZone.run(() =&gt; this.UserData= UserData)
              );
      });
  }
  </code></pre>
  
  <p>And this is the mark-up</p>
  
  <pre><code>&lt;div *ngIf="UserData"&gt;  
      &lt;div class="container-fluid"&gt;
          &lt;h3&gt;{{UserData.Id}}&lt;/h3&gt;
          &lt;user-tiles [UserData]="UserData"&gt;&lt;/user-tiles&gt;         
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Routes work fine, the correct data is retrieved from the server and the contents inside the <code>&lt;h3&gt;</code>get updated after a second but the "user-tiles" components does not re-render. UserData is an @Input inside user-tiles. </p>