Как настроить коврик-пагинатор в угловой материал - PullRequest
Новая
       23

Как настроить коврик-пагинатор в угловой материал

0 голосов
/ 06 декабря 2018

Я хочу настроить mat-paginator. По умолчанию я получаю paginator, подобный этому, который приведен в ссылке ниже https://material.angular.io/components/paginator/overview. Но я хочу разбить на страницы, как показано на рисунке ниже.Как я могу сделать это, используя mat-paginator

enter image description here

Может кто-нибудь, пожалуйста, помогите мне с этим.

Ответы [ 3 ]

0 голосов
/ 29 января 2019

Маршал неверен.Вы можете установить свойство pageIndex для paginator для материала https://material.angular.io/components/paginator/api#MatPaginator

Я подражал именно тому, что вы пытались сделать.Жестко запрограммировано, поэтому вам нужно будет разобраться, как добавлять кнопки в зависимости от количества страниц, но все готово. 

<button mat-fab (click)="page.previousPage()"><</button>
          <button mat-fab (click)="page.pageIndex = 0">1</button>
          <button mat-fab (click)="page.pageIndex = 1">2</button>
          <button mat-fab (click)="page.pageIndex = 2">3</button>
          <button mat-fab (click)="page.nextPage()">></button>
          <mat-paginator style="visibility:hidden" #page [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
0 голосов
/ 06 мая 2019

Здесь вы можете найти мою пользовательскую директиву (StylePaginatorDirective), вдохновленную ответом @Marshal, но полностью переписанную с нуля, чтобы показать нумерацию страниц внутри метки-тега-пагинатора-диапазона

Предварительный просмотр

enter image description here

Stackblitz

https://stackblitz.com/edit/angular-wyx2ue-ayitwa?file=app%2Fstyle-paginator.directive.ts

https://angular -wyx2ue-ayitwa.stackblitz.io

Позиционирование

Не стесняйтесь настроить порядок компонентов с помощью пользовательского класса CSS: https://stackoverflow.com/a/55969038/2835268

0 голосов
/ 06 декабря 2018

Я подумал, что это будет хорошая возможность точно узнать, как далеко я мог бы пойти с помощью директив DOM манипулирования компонентом библиотеки материалов ... чувствую, что я справился довольно хорошо, но ... я пришел к выводу, что это не будетвозможно ... это был хороший опыт обучения.

  • могут быть и другие, более опытные, чем я, которые могли бы пойти дальше или даже прокомментировать лучший способ.
  • но для моего уровня опыта работы с директивами я считаю, что это невозможно сделать с помощью директив / DOM

enter image description here

Я избавлю вас от прохождения всех моих изменений для создания этого стекаблика и сразу выясню, почему я считаю, что это невозможно.

Ниже приведены 4 метода, используемыеpaginator для перемещения по массиву

  • firstPage()
  • previousPage()
  • nextPage()
  • lastPage()

https://github.com/angular/material2/blob/63be232283262615fa2130900c80dd570eff6cda/src/lib/paginator/paginator.html#L58

Ни один из которых не приметиндекс или значение, делающее невозможным использование кнопок 1-6 на скриншоте ... поскольку теоретически они могут использовать только один из 4 методов, описанных выше.

Мне удалось вставитькнопка 3, чтобы посмотреть, смогу ли я нажать на один из этих методов через директиву ... так как вы можете видеть, что в данный момент при нажатии выдается предупреждение.

  • Мне не удалось использовать один изПриведенные выше методы не совсем уверены, как подключить это ... или если это вообще возможно.
  • В свете невозможности передать значение этим методам, и не в состоянии выяснить, какСоздайте событие click и подключите его к компонентному методу через Renderer2. Я чувствую, что это невозможно.

Stackblitz

https://stackblitz.com/edit/angular-wyx2ue?embed=1&file=app/paginator-overview-example.html

В заключение

Как указанодля меня это был полезный опыт обучения с директивами ... но я думаю, что сделать брендирование страницы, отвечающей вашим требованиям, будет невозможно, и вам следует изучить альтернативную библиотеку, отвечающую вашим требованиям.

...