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

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

void Dosomething()
{
    //Use the PINNO Property here
}

您不应该致电pageChange(newPage: number) { this.router.navigate(['/books'], { queryParams: { page: newPage } }); }，而不是直接称之为：{/ p>

this.router.navigate

Answer 2

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

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

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

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

在Angular中重定向到上一页

2 个答案: