Angular 当查询参数改变时路由器导航不加载页面

Question

我有一个显示 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？我是否需要在路由器中设置一些东西来识别对查询参数的更改？我这样做是不是全错了？

Answer 1

你只需要更新你的方法 onManufacturerChange 添加一个额外的参数

相对

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

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

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

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

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

Answer 2

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

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

然后我需要创建一个 updateRoute() 函数，在订阅从 api 加载数据后调用该函数。浏览器中的后退和前进按钮仍然不起作用（它步进 URLs 但不更新显示）但是 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});
  }

Answer 3

从 Angular v5 开始，Router class onSameUrlNavigation

现在有一个选项

How to handle a navigation request to the current URL. One of:

'ignore' : The router ignores the request.

'reload' : The router reloads the URL. Use to implement a "refresh" feature.

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

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

Angular 当查询参数改变时路由器导航不加载页面

Angular router navigate doesn't load page when query parameters change

angular-routing

angular