angular-material - 如何在角度材料中自定义 mat-paginator

Question

我想自定义 mat-paginator 。默认情况下，我会得到这样的分页器，它在下面的链接 https://material.angular.io/components/paginator/overview中给出。但我想要如下图所示的分页。我如何使用mat-paginator做到这一点

谁能帮我解决这个问题。

标签： angular-materialpaginator

Answer 1

2020 年 8 月 20 日更新

---

使用@uhamid 答案作为灵感，以及下面的几条评论，表明这实际上是可能的，我修改了我的第一次尝试以提供完整的解决方案。

尽管Umair Hamid下面的示例是功能性的，但它不包括所需的样式。它还利用ngDoCheck了引入递归类型行为并可能引入性能问题的方法。

我还重构了大部分逻辑以提供更完整的解决方案。

像这样使用它：

<mat-paginator style-paginator showFirstLastButtons [showTotalPages]="3" [length]="7130" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"> </mat-paginator>

提供页面按钮以显示为输入[showTotalPages]，如果不提供，则默认为2

---

---

堆栈闪电战

https://stackblitz.com/edit/angular-wyx2ue-bw95ug?embed=1&file=app/style-paginator.directive.ts

修订版 2020 年 8 月 20 日

https://stackblitz.com/edit/angular-8holwx?file=src/app/style-paginator.directive.ts