时间戳

首页 > 解决方案 > 角度 6 中的分页概念

angular - 角度 6 中的分页概念

问题描述

我正在使用两个页面，产品列表页面和产品详细信息页面。

在产品列表中，我有 100 个产品。每页 10 个产品。我使用下一个和上一个按钮从一个页面移动到另一个页面。 在此处输入图像描述

分页就像 0,1,2,---,10。下一页我也有 10 条记录。

我在product_list中使用 RouterLink 作为 View 按钮。喜欢，

          <td>
             <a class="badge badge-view-btn" [routerLink]="['/product/view',p.id]">View </a>
          </td>

并将返回按钮从product_detail返回到product_list

喜欢

<button class="btn btn-primary btn-pill btn-lg m-b-15rem" (click)="back()">
            <i class="fa fa-angle-left fa-lg m-r-10"></i>Back</button>

  back() {
   this.location.back();
   }

我也已经为表格应用了分页。

挑战：

  1. 如果我转到产品 15（第 2 页）并单击查看按钮。
  2. 然后在单击返回按钮时，我必须转到第 2 页本身而不是第 1 页。通过给this.location.back();它返回到第 1 页。

如果我必须转到第 2 页，我想做什么？

标签： angularangular-ui-routerangular6angular5angular-router

解决方案

您的产品列表页面路径也应该包括分页索引。例如：/product/product_list?pageIndex=1

因此，当下一个和上一个按钮单击事件更改路由器 queryParam 时，您可以监听路由更改事件并更新数据。现在，因为当您调用“this.location.back()”时，路由器中包含的页面信息将自动带您正确分页

推荐阅读