Angular PrimeNG Paginator组件

Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Paginator组件。我们还将学习属性、事件和造型，以及代码中使用的语法。

分页器组件：它用于以分页格式显示内容。

属性:

totalRecords : 它是要显示的总记录页的总数。它是数字数据类型，默认值是0。
rows :它是每页要显示的数据数。它是数字数据类型，默认值是0。
first : 它是要显示的第一行的零相对数。它是数字数据类型，默认值是0。
pageLinkSize : 它设置要显示的页面链接的数量。它是数字数据类型的，默认值是5。
rowsPerPageOptions :它是在每页下拉菜单中显示的整数/对象值的数组。它是数组数据类型，默认值为空。
style。它是组件的内联样式。它是字符串数据类型，默认值为空。
styleClass : 它是组件的风格类。它是字符串数据类型，默认值为空。
alwaysShow : 它指定是否在只有一个页面的情况下显示它。它是布尔数据类型，默认值为真。
showFirstLastIcon : 它表示在分页器上显示第一页和最后一页的图标。它是布尔数据类型，默认值为true。
templateLeft : 它是注入分页器左侧的模板实例。它是TemplateRef数据类型，默认值为空。
templateRight : 它是注入分页器右侧的模板实例。它是TemplateRef数据类型，默认值为空。
dropdownItemTemplate : 这是一个模板实例，用于注入分页器内的下拉项目。它是TemplateRef数据类型，默认值为空。
dropdownAppendTo : 它是连接下拉式覆盖的目标元素。它可以接受任何类型的数据，默认值为空。
dropdownScrollHeight : 它是视口的下拉高度，单位是像素，如果列表的高度超过这个值，就会定义一个滚动条。它是字符串数据类型，默认值是200px。
currentPageReportTemplate : 它是当前页报告元素的模板。它是字符串数据类型，默认值是（{currentPage} of {totalPages}）。
showCurrentPageReport : 它指定是否显示当前页面的报告。它是布尔数据类型，默认值是false。
showJumpToPageDropdown : 它指定是否显示一个下拉菜单以导航到任何页面。它是布尔数据类型，默认值是false。
showPageLinks : 它指定是否显示页面链接。它是布尔数据类型，默认值为true。

事件:

onPageChange。它是一个回调，当元素中的页面发生变化时被触发。

样式:

p-paginator。它是容器元素。
p-paginator-first: 它是第一页元素。
p-paginator-prev: 它是前一个页面元素。
p-paginator-pages。它是页面链接的容器。
p-paginator-page。它是页面链接。
p-paginator-next。它是下一个页面元素。
p-paginator-last。它是最后一个页面元素。
p-paginator-rpp-options。它是每页的行数下拉。
p-paginator-page-options。它是跳转到每页的下拉菜单。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：它将看起来像如下。

Angular PrimeNG Paginator组件

例子1：这是一个基本的例子，说明如何使用分页器组件。我们使用了row和totalRecord属性，分别给出了每页要呈现的数据数和记录总数的信息。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Paginator Component</h5>
<p-paginator [rows]="1" [totalRecords]="15"></p-paginator>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { PaginatorModule } from "primeng/paginator";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    PaginatorModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG Paginator组件

例子2：在这个例子中，我们将在分页器组件中使用pageLinkSize属性与rowsPerPageOptions下拉。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Paginator Component</h5>
<p-paginator
  [pageLinkSize]="10"
  [rows]="1"
  [totalRecords]="25"
  [rowsPerPageOptions]="[10,20,30]">
</p-paginator>

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { PaginatorModule } from "primeng/paginator";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    PaginatorModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG Paginator组件