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

Answer 2

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

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

Answer 3

您可以通过订阅路径参数中的更改来做到这一点。您可以利用ActivatedRoute中存在的可观测对象。

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

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

3 个答案: