CODEWITHSUNDEEP
javascriptjquerycssangularfrontend
Indronil Chaudhuri
Indronil Chaudhuri

Reputation: 89

Angular2 Parameterised router link component does not refresh completely

I am trying to display a set of images when I click on a menu item. The menu is like

<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 router component is 

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);


        });
    });

Entry in app.routing.ts is

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

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 .

I need to remove what ever has been displayed by the previous component and display the new images . Any suggestion will be welcome

Upvotes: 0

Views: 118

Answers (1)

Moruling James
Moruling James

Reputation: 146

I ran into this kind of problem a while ago, its because of the component reuse of angular that it changes the url, but doesnt refresh the component. So, here how i force it (after a lot of stackoverflowing). You need to subscribe to the parameter change and do something within the subscription.

1) import ActivatedRoute from @angular/route and Subscription from rxjs

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

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

2) in your ngOnInit, subscribe and do something inside it

    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) last but not least, do not forget to unsubscribe

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

Upvotes: 1

Related Questions