Angular 6 router link issue in the same page

问题

I have two links:

1. ['/productlist',1000]
2. ['/productlist',1001]

These two links are on the same page. If I click on any link for the first time. It is redirecting to the page, but if I click on the other link it is not working.

component.html code

<a class="dropdown-item" (click)="GetProductList(subitem.SubCategoryID)">
 <i class="mdi mdi-chevron-right" aria-hidden="true"></i> 
 {{ subitem.SubCategoryName}}
</a> 

GetProductList(SubCategoryID){ 
    this.router.navigate(['/productlist',SubCategoryID]); 
}

回答1:

Since for angular it is same route - it is not reloaded.

Two possible solutions:

1. In component subscribe to this.route.params and react accordingly, like in Angular 4 routerLink - reloading current route

2. in Angular 5 there is an option for reloading the active route:

RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’}

Try it

回答2:

ok, there is many unnecessary hacks for this (even dangerous due to memory leaks...), but the proper (intended) way, is to subscribe to the route's param change, then the binded form should update when you reload your data:

ngOnInit() {
  this.route.paramMap.subscribe(params => {
     this.myParam = params.get("id");
     this.loadData();
  })
}

note: the route here is the ActivatedRoute imported from '@angular/router';

but, If you still want full refresh, you can setup to a dummy root/component, that will redirect you back.

回答3:

Try this way.

<a [routerLink]="['/productlist']" [queryParams]="{id: 1}"> // Set dynamic
   link
</a>

Another way is :

<a  [routerLink]="[ '/productlist',1000]">Link</a>

By this way you don't need to call any function. For more information please read this.

来源：https://stackoverflow.com/questions/52854256/angular-6-router-link-issue-in-the-same-page