title: Using the same component to show different JSON data based on route in Angular 2
body: <p>I am trying to load different JSON files in a template based on the route.</p>
  
  <p><strong>Routing</strong></p>
  
  <pre><code>const APP_ROUTES: Routes=[
  {path : ':artPage',component: ArtComponent}                
  ];
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <p>The service uses the route parameter to fetch a JSON file.</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/map'; 
  import { ActivatedRoute } from "@angular/router";
  
  
  @Injectable()
  export class ArtService {
    artType: any;
  
    constructor(private http: Http, private activatedRoute: ActivatedRoute) {
      activatedRoute.params.subscribe(
        (param: any) =&gt; this.artType = param['artPage']
      );  
    }
  
    getData() {
      return this.http.get('app/json/' + this.artType + '.json')
      .map((response: Response) =&gt; response.json());
    }
  
  }
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { ActivatedRoute } from "@angular/router";
  import { Subscription } from "rxjs/Rx";
  import { ArtService } from '../art.service';
  
  @Component({
    selector: 'app-art',
    templateUrl: './art.component.html'
    providers: [ArtService]
  })
  export class ArtComponent implements OnInit, OnDestroy {
      artWork: any;
      toggleDisplay: any;
      artType: any;
      private subscription: Subscription;
  
    constructor(private artService: ArtService, private activatedRoute: ActivatedRoute) { 
          this.subscription = activatedRoute.params.subscribe(
              (param: any) =&gt; this.artType = param['artPage']
              ); 
          this.toggleDisplay = function (image) {
          image.toggle = !image.toggle;
      }
    }
  
    ngOnInit() {
      this.artWork = this.artService.getData()
          .subscribe(
              (data) =&gt; this.artWork = data
          );
    }
  
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
  
  }
  </code></pre>
  
  <p>The component subscribes to the data on initialisation. When the route changes, it doesnt run that subscription code again which needs to fetch the fresh value from the route. How do I use that code so that it gets fresh data every time the route changes?</p>