Angular分页器p-paginator保存页码&&路由传值

场景1：用户在B页面点击新增按钮进入T页面，新建完成后返回B页面时，B页面的页码索引page index和页面大小page size要求保持之前的状态，且在B页面单独点刷新后，page index和page size要重置为默认值。

分页器 p-paginator 的使用

primeNG提供的分页组件，常见使用方法参照官方文档。
非官方文档内容补充：当需要通过外部编程改变页码值时候，需要调用在typscript内获取paginator组件对象，并调用其changePage()函数，具体如下。

// html页面内需要给<p-paginator>添加#paginator)
// 通过ViewChild获取paginator对象
@ViewChild('paginator') paginator: Paginator;

// 更新页码信息函数
updateCurrentPage(newPageIndex: number, newPageSize: number): void {
	// 必须使用setTimeout函数
    setTimeout(() => {
    	// 设置页面显示大小
        this.paginator.rows = newPageSize;
        // 设置页码索引值
        this.paginator.changePage(newPageIndex);
    });
}

页面跳转逻辑

菜单页面与新增页面互相跳转时：通过queryParams路由传值。

菜单页面初始化时：

1. 清除localStorage值 (为了防止从其它路由进入时候读取历史localStorage值)
2. 尝试获取queryParams值，并保存至localStorage，重新路由至当前页面(清除queryParams路由参数值，避免刷新问题)。
3. 读取localStorage值，更新页码信息。

如果仅使用localStorage或queryParams来保存页码信息，会出现无法避免的问题： localStorage情况下，若用户在第三页下关闭网页，再次打开时，读取localStorage则会自动跳至第三页。 queryParams情况下，用户新建完成返回菜单栏改变页码，若刷新页面，则页码变回queryParams参数值，这两种情况都是不合理的。

初始化时候代码如下

// 菜单页面代码
constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
ngOnInit() {
	// 清除localStorage历史记录
	this.localStorage.remove('pageIndex');
	this.localStorage.remove('pageSize');
	this.activatedRoute.queryParams.subscribe((params: Params) => {
	    this.taskPageIndex = params.pageIndex;
	    this.taskPageSize = params.pageSize;
	    this.localStorage.set('pageIndex', this.taskPageIndex.toString());
	    this.localStorage.set('pageSize', this.taskPageSize.toString());
	    // 重新定向，清除路由参数信息
	    this.router.navigate(['/B page address']);
	});
    // 若localStorage存在则读值
    if (this.localStorage.get('pageIndex')) {
        this.taskPageIndex = parseInt(this.localStorage.get('pageIndex'), 10);
        this.taskPageSize = parseInt(this.localStorage.get('pageSize'), 10);
    }
    // 获取页面信息（自定）
    this.refreshTask();
}

---

场景2：从B页面进入R页面后，用户通过点击浏览器后退键回到B页面，页码保持不变。

乍一看似乎和场景1差不多，但实际执行时会发现，通过浏览器后退键相当于直接刷新进入B页面，无法通过路由传参。

一、思路及常见问题

后退键的本质就是重新加载之前的页面，意味着路由地址也是之前的地址，因此可以通过在B页面改变自身的路由参数值，并通过参数值设定页码信息来达到目的。
这里不推荐不使用localStorage或SessionStorage方法，因为这会使得从首页面进入B页面依然保持原有页码，不符合常理。
思路虽然简单，但在实际开发过程中发现需要考虑的地方还是蛮多的，大体如下：

1. Angualr默认页面路由参数更新时不会重新加载组件，因此ngOnInit()并不会执行，需要在this.activatedRoute.queryParams.subscribe()内执行更新命令。
2. 第一次进入B页面时，页码变量的值读取逻辑，以及此时的路由参数的改变（这会影响到从页码4回退至页码1的情况）

二、主要代码实现

	ngOnInit() {
		// 执行订阅函数，会持续监听queryParams是否改变
	    this.activatedRoute.queryParams.subscribe((params: Params) => {
	    	// queryParams改变，则改变变量值并刷新页面信息
	        this.taskPageIndex = params.pageIndex == undefined ? 1 : params.pageIndex;
	        this.taskPageSize = params.pageSize == undefined ? 10 : params.pageSize;
	        this.refresh();
	    });
	}
	// 页码值改变时的执行函数
    onPageChange(event: any) {
        if (this.taskPageIndex != event.page + 1 || this.taskPageSize != event.rows) {
            this.taskPageSize = event.rows;
            this.taskPageIndex = event.page + 1;
            // 页码改变，则改变路由参数并刷新页面信息
            this.router.navigate(['/B page address'], {queryParams: {pageIndex: this.taskPageIndex, pageSize: this.taskPageSize}}).then(() => {
                this.refresh();
            });
        }
    }