使用 queryParams Angular 输入后无法在后退按钮上离开页面

Question

我在尝试将页面分页留在列表上时遇到了麻烦。

original route => path: 'produtos/:categoria/:productId'

因此，当进入页面时，我将其添加到 init

  updatePage(pageIndex:number){
    this.currentPage = pageIndex;

    this._router.navigate([], {
      relativeTo: this.route,
      queryParams: {
        page: pageIndex
      },
     queryParamsHandling: 'merge',

    });

  }

上面的代码可以正常工作，例如

• produtos/:categoria/:productId?page=1;
  produtos/:categoria/:productId?page=2;
  produtos/:categoria/:productId?page=3;

然后我按后退按钮

• rodutos/:categoria/:productId?page=3;
  produtos/:categoria/:productId?page=2;

由于某种原因我无法离开此页面，一直在同一页面重新加载

• -produtos/:categoria/:productId?page=1;

Answer 1

导航以添加查询参数时，请尝试添加replaceUrl: true 。 这应该允许后退按钮像您没有创建新的导航事件一样工作

https://angular.io/api/router/NavigationBehaviorOptions#replaceUrl

Answer 2

在这里做这个逻辑做得很好：

updatePage(pageIndex:number){
    this.currentPage = pageIndex;

    if (this.currentPage <= 1) {

      this._router.navigate([], {
       replaceUrl:true,
        queryParams: {
          page: pageIndex
        },
        queryParamsHandling: 'merge',

      });
      
    } else {
      this._router.navigate([], {
        relativeTo: this.route,
        queryParams: {
          page: pageIndex
        },
        queryParamsHandling: 'merge',

      });
    }
  }