重定向到 Angular 中的上一页

Question

我已经安装了一个名为 ngx-pagination 的包。但是我有一个问题，因为当您离开上一页并单击后退按钮时，它会将您重定向到第一页而不是返回上一页？如果我单击浏览器中的后退按钮，如何使其返回上一页？下面是我的代码。

TS

     config: any; 

     constructor() {
        this.config = {
                currentPage: 1,
                itemsPerPage: 2
            };

         this.route.paramMap
            .map(params => params.get('page'))
            .subscribe(page => this.config.currentPage = page);
            }
      }

      ngOnInit() {
            this.getAllBooks();


      }

      pageChange(newPage: number) {
           this.router.navigate(['/books'], { queryParams: { page: newPage } });
  }

        getAllBooks() {
            this.subscription = this.booksService.getAll()
            .subscribe(
                (data:any) => {
                    this.books = data;
                console.log(data);
            },
            error => {
                console.log(error);
            });
        }

HTML

<tbody>
          <tr *ngFor="let book of books | paginate: { itemsPerPage: config.itemsPerPage, currentPage: config.currentPage }">
            <td>{{ book.SKU }}</td>
            <td>{{ book.name }}</td>
            <td>{{ book.description }}</td>
         </tr>
        </tbody>
        </table>
        <pagination-controls (pageChange)=“pageChange($event)” class="my-pagination"></pagination-controls>

Answer 1

我相信您面临的问题是因为您没有使用路由器来存储当前页面。因此，当您单击浏览器上的后退按钮时，它将执行路由器导航而不是分页导航。

因此，不仅要更新控件上的当前页面，还需要在每次更改页面时将页面存储在路由器中并进行导航。如果您在浏览器按钮上来回导航，这种方式独立，页码始终保持同步。

使用这种方法的另一个优点是，您将能够在新标签页上打开网址并从正确的页面开始，甚至与其他人共享，它会直接指向您期望的页面，而不是将其重置为第一页。

您可以在 ngx-pagination 本身的文档中查看实现示例 here。

Answer 2

您面临的问题是因为导航：

pageChange(newPage: number) {
    this.router.navigate(['/books'], { queryParams: { page: newPage } });
}

你不应该调用this.router.navigate，而是直接调用它：

constructor() {
    let currentPage = localStorage.getItem('currentPage');
    this.config = {
        currentPage: currentPage ? currentPage : 1 ,
        itemsPerPage: 2
    };
}

pageChange(newPage: number) {
    localStorage.setItem('currentPage', newPage);
    this.config.currentPage = newPage;
}