查询参数更改时，角度路由器导航不会加载页面

Posted 2023-03-13

【中文标题】查询参数更改时，角度路由器导航不会加载页面

【英文标题】：Angular router navigate doesn't load page when query parameters change

【发布时间】：2019-08-04 00:14:28

【问题描述】：

我有一个显示 API 查询结果的组件。我想添加一个下拉框，以便可以过滤列表，但是当 url 查询参数更改时，我似乎无法重新加载页面。

<div>
  <H2>Products</H2>
  <form>
    Filter By Manufacturer
    <select (change)="onManufacturerChange($event.target.value)">
      <option value="">All</option>
      <option [value]="m" *ngFor="let m of manufacturers">m</option>
    </select>
  </form>
  <ul>
    <li *ngFor="let p of products"><B>p.manufacturer</B> - p.name</li>
  </ul>
</div>

还有打字稿

export class ProductListComponent implements OnInit 

  public products: Array<object> = [];
  public manufacturers: any = [];
  public manufacturer: string = "";
  public search: string = "";

  constructor(private _assetService: AssetService, private router: Router, private route: ActivatedRoute)  

  ngOnInit() 
    this.route.queryParams.subscribe(params => 
      console.log(params);
      if('manufacturer' in params)
        this.manufacturer = params.manufacturer;
      
      if('search' in params)
        this.search = params.search;
      
    )

    this._assetService.getManufacturers().subscribe(data => 
      this.manufacturers = data;
    )

    this.loadProducts(); 
  

  loadProducts()
      this._assetService.getProducts(this.manufacturer,this.search).subscribe((data: ProductListResult) => 
      this.products = data.products;
    ) 
  

  onManufacturerChange(newValue)
    this.router.navigate(['/products'], queryParams: manufacturer: newValue);
  

当我更改下拉框中选择的项目时，浏览器中显示的 URL 会更改，但页面不会重新加载。如果我使用所需的 URL 手动刷新浏览器，则会显示正确的输出。如果我将 route.navigate 中的路径更改为可以正常工作的完全不同的路径。如果我在路由器导航后添加对loadProducts() 的调用，它会重新加载页面，但一个选择不同步。

我读过的所有内容都表明，如果 ngFor 中引用的数组发生更改，它应该会自动更新 DOM，但我似乎无法触发它。我是否需要调用某种刷新或无效例程来更新 DOM？我需要在路由器中设置一些东西来识别查询参数的变化吗？我是不是搞错了？

【问题讨论】：

medium.com/@kevinkreuzer/…

尝试像这样history.replaceState(null, null, 'URL' + '?id=' + id + '&role=' + role) 更新您的queryParams

【参考方案1】：

您只需要通过添加一个额外的参数来更新您的方法 onManufacturerChange

relativeTo

onManufacturerChange(newValue)
    this.router.navigate(['/products'], queryParams: manufacturer: newValue,relativeTo : this.route);
  

这里 this.route 将是 ActivatedRoute 的实例，并且 这将在此处使用动态查询参数更新路由 url，即 ma​​nufacturer

所以在 ngOnInit 中你会得到更新的查询参数值，像这样

ngOnInit()
   this.route.queryParams.subscribe(params => 
        const manufacturer = params['manufacturer'];
        console.log('manufacturer',manufacturer);
      );

如果这对您有帮助，请告诉我，祝您编码愉快！！！

【讨论】：

谢谢，但仍然没有重新加载页面。

【参考方案2】：

据我所知，当查询参数发生变化时，没有优雅的方法可以让 Angular 重新加载页面。

我的代码中的错误是 loadProducts() 使用了 this.manufacturer，所以我需要在 onManufacturerChange() 中设置它。它不会重新加载页面，但会重新加载数据并更新 DOM。

然后我需要创建一个 updateRoute() 函数，该函数在 subscribe 从 api 加载数据后调用。浏览器中的“后退”和“前进”按钮仍然不起作用（它会逐步浏览 URL，但不会更新显示），但 URL 和显示会保持同步。现在已经足够接近了。

  loadProducts() 
    this._assetService.getProducts(this.manufacturer,this.search).subscribe((data: ProductListResult) => 
      this.products = data.products;
      this.updateRoute();
    )
  

  onManufacturerChange(newValue)
    this.manufacturer = newValue;
    this.loadProducts();
  

  updateRoute( )
    var queryParams = ;
    if (this.manufacturer!= "" )queryParams['manufacturer'] = this.manufacturer;
    if (this.search!= "" )queryParams['manufacturer'] = this.search;
    this.router.navigate(['/products'], queryParams: queryParams);
  

【参考方案3】：

从 Angular v5 开始，Router 类 onSameUrlNavigation 上有一个选项

如何处理对当前 URL 的导航请求。之一：

'ignore' : 路由器忽略请求。

'reload' ：路由器重新加载 URL。用于实现“刷新”功能。

在主应用路由文件中，将值设置为'reload'：

RouterModule.forRoot(
  routes,
   onSameUrlNavigation: 'reload' 
)