角度 6 中的分页概念

Question

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

在产品列表中，我有 100 个产品。每页 10 个产品。我使用下一个和上一个按钮从一个页面移动到另一个页面。

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

我在 product_list 中将 RouterLink 用于查看按钮。喜欢，

          <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 页，我想做什么？？

Answer 1

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

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