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

【问题标题】：How do I get Angular to reload the same page but with a different argument?如何让 Angular 重新加载相同的页面但使用不同的参数？
【发布时间】：2019-07-07 00:06:15
【问题描述】：

我有一个 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 已经加载，因此它不会重新加载它.我该如何解决。

【问题讨论】：

添加您的routing.ts
当productType发生变化时，需要根据productType取数据并重新绑定到组件。无需重新加载。其次，不要使用 [routerLink]，而是使用（单击）事件处理程序并传递适当的数据。这是处理此类用例的正确方法。

标签： html angular

【解决方案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;
      }
    });
  }

【讨论】：

【解决方案2】：

您可以通过订阅路由参数中的更改来做到这一点。您可以利用 ActivatedRoute 中的 observables。

import { ActivatedRoute } from '@angular/router';
...

export class ProductComponent implements OnInit {
  public product: any;
  constructor (
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.product = params['product'];  // If your route path is 'product/:product'
      // Do something with the new route params. (Eg. Update component state, etc.)
    }
  }
}

【讨论】：

【解决方案3】：

你可以订阅ActivatedRoute中的params，从url中获取路由参数，然后调用你的函数来加载视图。

export class ProductComponent implements OnInit {

  public product :any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(){
    this.route.params.subscribe((param:Params) => {
       this.product = params['product']; // where product the key defined in route
       // Then call function to update view with new params product
    });
  }
}

【讨论】：