Angular2パラメータ化されたルータリンクコンポーネントが完全にリフレッシュされない

Question

メニュー項目をクリックしたときに一連の画像を表示しようとしています。メニューは、ルータコンポーネントはapp.routing.tsで

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 => { 
     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 => { 
      let imageList: String[] = demo; 


      var imageListLength = imageList.length; 
      var index; 
      for (index = 0; index < imageListLength; index++) { 
       this.imageList[index] = this.sanitizer.bypassSecurityTrustHtml(imageList[index] as string); 
      } 

      console.log(this.imageList); 


     }); 
    }); 

エントリは最初のメニューは、それがない4枚の画像を表示しなければならないクリック

{ path: 'image-gallery/:artistName', component: ImageGalleryComponent } 

である

   <ul id="demo23" class="collapse"> 
        <li> 
         <a [routerLink]="['image-gallery','Picasso']">Picasso</a> 
        </li> 
        <li> 
         <a [routerLink]="['image-gallery','Vincent']">Vincent</a> 
        </li> 
        <li> 
         <a [routerLink]="['image-gallery','Rembrandt']">Rembrandt</a> 
        </li> 
      </ul> 

似ているが、 2番目のメニューオプションをクリックすると、1つの画像を表示するときに4つの画像が表示されます。最初の画像は右の画像であり、他の3つの画像は、この経路の以前の呼び出しから除去されていない画像である。

以前のコンポーネントで表示されたものを削除して、新しい画像を表示する必要があります。任意の提案は歓迎されます

Answer 1

私はこの種の問題に少し前に遭遇しました。それは、URLを変更する角度のコンポーネントの再利用のためですが、コンポーネントをリフレッシュしません。だから、ここで私はそれを強制する（スタックオーバーフローの後）。パラメータの変更を購読して、サブスクリプション内で何かを行う必要があります。あなたのngOnInitでrxjs

import { Subscription } from 'rxjs/Rx'; 
    import { ActivatedRoute} from '@angular/router'; 

    export class YourComponent implements onInit, onDestroy { 
    private subscription: Subscription; 

2）からの角度/ルートおよびサブスクリプション@から

が

1）輸入ActivatedRoute、サブスクライブし、内部で何かをすること

ngOnInit() { 
    this.subscription = this.activatedRoute.params.subscribe((params) => { 
     this.productId = params['id']; 
     //do something here to trigger the changes 
     this.product = this.productService.getProduct(this.productId); 
     console.log(this.product); 
    }); 

}

3）最後になりましたが、少なくとも、退会を忘れないでください。

ngOnDestroy() { 
    this.subscription.unsubscribe(); 
}