angular-material - 如何在角 Material 中自定义 mat-paginator

Question

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



任何人都可以帮我解决这个问题。

Answer 1

更新 08/20/2020

使用@uhamid 回答作为灵感，以及下面的几条评论，表明这实际上是可能的，我修改了我的第一次尝试以提供完整的解决方案。
虽然 Umair Hamid下面的示例是功能性的，它不包括所需的样式。它还利用了ngDoCheck这引入了递归类型行为，并可能引入性能问题。
我还重构了大部分逻辑以形成更完整的解决方案。
像这样使用它:<mat-paginator style-paginator showFirstLastButtons [showTotalPages]="3" [length]="7130" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"> </mat-paginator>提供页面按钮以显示为输入 [showTotalPages] ，如果未提供，则默认为 2


STACKBLITZ
https://stackblitz.com/edit/angular-wyx2ue-bw95ug?embed=1&file=app/style-paginator.directive.ts
修订的 STACKBLITZ 8/20/2020
https://stackblitz.com/edit/angular-8holwx?file=src/app/style-paginator.directive.ts