title: Stop reloading the whole content on route change
body: <p>I have a route like the following: <code>page/:id</code>, where it loads a different content for each <code>id</code>. However, every time I go to a different page, it reloads the entire content. I'd like to reload only the data coming from the API.</p>
  
  <p>Navigation:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li [routerLink]="['/page', 1]"&gt;Page 1&lt;/li&gt;
   &lt;li [routerLink]="['/page', 2]"&gt;Page 2&lt;/li&gt;
   &lt;li [routerLink]="['/page', 3]"&gt;Page 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Template:
  <code>&lt;h1 *ngIf="data"&gt;{{data.name}}&lt;/h1&gt;</code></p>
  
  <p>Component:</p>
  
  <pre><code>export class DataComponent implements OnInit {
  
    data: any;
    error: any;
  
    constructor(
      private route: ActivatedRoute,
      private service: DataService
    ) {}
  
    ngOnInit() {
      this.getData();
    }
  
    getData() {
      this.service.getData()
        .subscribe(
          res =&gt; this.data = res,
          error =&gt; this.error = error
        );
    }
  
  }
  </code></pre>
  
  <p>If you go to this <a href="http://plnkr.co/edit/QGqdw4roSYKIoTuyANSd?p=preview" rel="nofollow">Plunker</a>, you'll see the black rectangle blinks every time the route changes. Ideally, the black part would remain intact, only the data inside would change.</p>
  
  <p>I also noticed this flickering behavior happens only if I'm using an HTTP call. If I'd have other things in that component, this wouldn't happen when changing routes.</p>
  
  <p>Any ideas on how to solve this?</p>
  
  <p><strong>EDIT</strong>: <a href="http://plnkr.co/edit/ZITXyhXAmWWk2hor13ea?p=preview" rel="nofollow">Here's a Plunkr</a> showing the expected behavior. However, I was using former <code>ROUTER_DIRECTIVES</code>, which are deprecated now.</p>