How do I get Angular to reload the same page but with a different argument?

Question

I have a single Angular component, ProductComponent. Based on the link that is selected as shown in the nav links below, I want the same ProductComponent to be reloaded but with a different parameter. [routerLink]="['/product', 'chicken']", for example, should load the product page but with chicken as the product.

<li class="nav-item" role="presentation">
    <a class="nav-link" [routerLink]="['/product', 'chicken']">
    Chicken<br>
</a>
</li>
<li class="nav-item" role="presentation">
    <a class="nav-link" [routerLink]="['/product', 'salads']">
        Salads<br>
    </a>
</li>
<li class="nav-item" role="presentation">
    <a class="nav-link" [routerLink]="['/product', 'sides']">
    Sides<br>
    </a>
</li>

The problem is when I am already on the product page, Angular is not reloading the page when a link is clicked because, despite the different parameters, it sees the page, /product, as already loaded so it does not reload it. How do I solve this.

Answer 1

The solution (courtesy of Mihail C.) is to trick the router into believing its last link was not loaded.

export class ProductComponent implements OnInit {

  constructor(
    private router: Router
  ) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => {
      return false;
    }

    this.router.events.subscribe((evt) => {
      if (evt instanceof NavigationEnd) {
        this.router.navigated = false;
      }
    });
  }