Javascript Angular2参数化路由器链路组件未完全刷新

我试图在单击菜单项时显示一组图像。菜单就像

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

单击第一个菜单必须显示4个图像，但当我单击第二个菜单选项时，它会显示4个图像，而它应该显示1个图像。第一个图像是右图像，其他3个图像是上次调用此路由时未删除的图像

---

我需要删除以前组件显示的内容并显示新图像。任何建议都是受欢迎的

我不久前遇到了这种问题，因为angular的组件重用，它更改了url，但没有刷新组件。所以，这里是我如何强制它（在大量堆栈溢出之后）。您需要订阅参数更改，并在订阅中执行某些操作

1） 从@angular/route导入ActivatedRoute并从rxjs导入订阅

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

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

2） 在你的ngOnInit中，订阅并在其中做一些事情

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

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

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