html - 我如何让 Angular 重新加载相同的页面但使用不同的参数？

Question

我有一个 Angular 组件，ProductComponent。根据下方导航链接中所示的所选链接，我希望重新加载相同的 ProductComponent，但使用不同的参数。 [routerLink]="['/product', 'chicken']"，例如，应该加载产品页面但以鸡肉作为产品。

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

问题是当我已经在产品页面上时，单击链接时 Angular 不会重新加载页面，因为尽管参数不同，它会看到页面/product 已经加载，所以它不会重新加载它.我该如何解决这个问题。

Answer 1

解决方案(由 Mihail C. 提供)是让路由器相信其最后一个链接未加载。

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