自定义角度材料分页器输入答案

【问题标题】：Customize angular material paginator inputs自定义角度材料分页器输入
【发布时间】：2020-04-26 11:59:18
【问题描述】：

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

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

我的分页器是这样的

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

【问题讨论】：

我不清楚。请添加更多详细信息

标签： angular angular-material angular-material-paginator

【解决方案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

【讨论】：