angular - 自定义角度材料分页器输入

Question

我正在使用 Angular Material Paginator，这是我的垫子分页器的 html 代码

<mat-paginator #paginator [pageSize]="6" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true">
  </mat-paginator>

我的分页器看起来像这样

问题是我有一个巨大的数据列表来为分页器显示这么多页面，我正在寻找一种方法来自定义分页器并添加一个输入来指示我想要显示的页面数，有什么解决方案要编码吗？

Answer 1

分页器中没有内置任何东西可以做到这一点。但是您可以添加自定义输入并通过代码设置页码。

@ViewChild(MatPaginator) paginator: MatPaginator;
goToPage(pageNumber: number) {
  // this updates the paginator component
  this.paginator.pageIndex = pageNumber - 1;

  // emit an event so that the table will refresh the data
  this.paginator.page.next({
    pageIndex: this.paginator.pageIndex,
    pageSize: this.paginator.pageSize,
    length: this.paginator.length
  });
}

https://stackblitz.com/edit/mat-paginator-select-page?embed=1