如何使用角度材料分页器中的浏览器后退按钮进行分页

Question

尝试执行以下操作：

如果用户
• 已经完成了分页本身，则在浏览器后退按钮上对数据进行分页，这意味着如果this.currentPage >0.

目前我尝试的是

ngOnInit(): void {
 this.location.onPopState((event)=>{
  if(this.currentPage >0){
    window.history.go(0);
    event.preventDefault(); //not stoping the event
    this.currentPage = this.currentPage -1;
    if (this.currentPage * this.pageSize >= this.placements.length - this.pageSize) {
      this.loadMorePlacements();
    }
    this.updatePaginator();
    this.updateStorePaginator();
  }
 });
}

问题是事件未停止，应用程序被带到上一个路由。

有没有办法停止事件并只对数据进行分页？任何帮助将不胜感激

Answer 1

你能改变分页器的逻辑吗？

如果是，您可以将页码放在 route 中并使用路由对数据进行分页，这样您就不需要侦听浏览器事件。

示例(路由(：

{ path: 'list/:page',      component: ExampleComponent },

示例组件

constructor(private route:ActivatedRoute){}
ngOnInit(){
   this.route.params.subscribe( params => {
      this.currentPage = params['page'];
      this.updatePaginator();
      this.updateStorePaginator();
   });
}

要更改页面的 btn：

<a routerLink="/list/5">Page 5</a>

要使用分页器的更改来更新路径，您可以执行此操作

<mat-paginator (page)="change($event)">
</mat-paginator>
change(e.page){
   this.router.parent.navigate(e.page);
}