AngularMaterial分页器设置页数缓存

本文已参与「新人创作礼」活动，一起开启掘金创作之路。
今天碰到一个需求，因为某个页面的表格订单数据页数过多，例如在第6页的时候，进入订单详情返回后却回到了第一页，需要到第6页还需要慢慢翻页点过去。产品问我是否可以做成哪页进去，返回的时候依旧是那页。

思路分析

首先想到的就是使用缓存这个方法，之前的页面有设置点击“搜索”后存储搜索框的缓存，但是放在这里是行不通的，因为搜索按钮并不会每次翻页的时候触发。
这时候我翻阅了Angular-Material文档，果然找到了分页器自带的事件page：

因为在此之前我的思路就是每次翻页的时候对当前页数进行保存，所以需要一个触发缓存的事件。
page则是在分页器分页索引改变的时候触发，刚好符合我的需求。
注意这里分页器的分页大小改变时也会触发，但我的分页固定为30条一页，如果有设置分页大小可变的话容易出问题。

代码编写

来看看原来的分页器代码是什么样

<mat-paginator #paginator [length]="resultsLength" [pageIndex]="0" [pageSize]="30">
</mat-paginator>

在这里页数索引pageIndex被强制设置为了0，需要给一个用来传值的参数，设置为pageIndexStart，同时添加page事件：

<mat-paginator #paginator [length]="resultsLength" [pageIndex]="pageIndexStart"
    [pageSize]="30" (page)="pageChange()">
</mat-paginator>

在TS中声明pageIndexStart和page事件

pageIndexStart = 0;

// 当分页索引发生改变时触发，保存页数缓存
pageChange(): void {
    const searchCondition = {
        pageIndexStart: this.paginator.pageIndex,
    };
    localStorage.setItem('purchaseOrderListPage', JSON.stringify(searchCondition));
}

在页面加载的时候读取缓存：
注意读取缓存的函数在生命周期中的位置，是需要在调用API之前的

// 获取页数索引的缓存
if (!isNull(JSON.parse(localStorage.getItem('purchaseOrderListPage')))) {
    const oldSearchCondition = JSON.parse(localStorage.getItem('purchaseOrderListPage'));
    this.pageIndexStart = oldSearchCondition.pageIndexStart;
}

最后不要忘了设置搜索的时候跳回首页，否则很容易出BUG（例如只有3页数据，用户依旧在缓存的第6页里）

// 搜索
searchInfo(): void {
    this.paginator.pageIndex = 0;
    // 保存搜索框缓存，不要保存页数缓存
    this.saveSearchCondition();
    this.fetchTableInfo();
}

这样就完成了！这次解决的非常顺利，也跟我阅读文档和实践能力提升有一定关系，继续加油。