title: Angular2 Parameterised router link component does not refresh completely
body: <p>I am trying to display a set of images when I click on a menu item. The menu is like</p>
  
  <pre><code>&lt;ul id="demo23" class="collapse"&gt;
      &lt;li&gt;
          &lt;a [routerLink]="['image-gallery','Picasso']"&gt;Picasso&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a [routerLink]="['image-gallery','Vincent']"&gt;Vincent&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a [routerLink]="['image-gallery','Rembrandt']"&gt;Rembrandt&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The router component is </p>
  
  <pre><code>export class ImageGalleryComponent {
  
  private artistName: String;
  private galleryRoute: ActivatedRoute;
  private apiService: ApiService;
  private imageList;
  private sanitizer: DomSanitizer;
  
  constructor(route: ActivatedRoute, apiService: ApiService, sanitizer: DomSanitizer) {
      this.galleryRoute = route;
      this.apiService = apiService;
      this.imageList = new Array;
      this.sanitizer = sanitizer;
  }
  
  ngOnInit() {
          this.galleryRoute.params.subscribe(params =&gt; {
          console.log("Initial image list length");
          console.log(this.imageList.length);
  
  
          this.artistName = params['artistName'];
  
          let artistName2Send = this.artistName;
  
          console.log(this.artistName);
          this.apiService.sendAsNonJSON("http://localhost:8080/icreate/getImages", artistName2Send).subscribe(demo =&gt; {
              let imageList: String[] = demo;
  
  
              var imageListLength = imageList.length;
              var index;
              for (index = 0; index &lt; imageListLength; index++) {
                  this.imageList[index] = this.sanitizer.bypassSecurityTrustHtml(imageList[index] as string);
              }
  
              console.log(this.imageList);
  
  
          });
      });
  </code></pre>
  
  <p>Entry in app.routing.ts is</p>
  
  <pre><code>{ path: 'image-gallery/:artistName', component: ImageGalleryComponent }
  </code></pre>
  
  <p>Clicking the first menu must show 4 images which it does , but when I click on the second menu option it is showing me 4 images when it should display 1 image. The first images is the right image the other 3 images are the images from the previous  invocation of this route which has not been removed .</p>
  
  <p>I need to remove what ever has been displayed by the previous component and display the new images . Any suggestion will be welcome</p>