I'm trying to figure out how to show a set of images when I click on a specific menu item. The menu structure looks like this:
<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>
The code for the router component is as follows:
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);
});
});
The app.routing.ts entry for this functionality is:
{ path: 'image-gallery/:artistName', component: ImageGalleryComponent }
When clicking the first menu option, it correctly displays 4 images. However, when clicking on the second menu option, instead of displaying just 1 image, it shows 4 images – the correct one and the previous 3 from the previous selection. How can I ensure that only the newly selected images are displayed and remove any previously shown images? Any suggestions would be appreciated.