极客教程Angular PrimeNG Paginator属性
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的风格设计，该框架可用于制作响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用分页器属性。
分页器组件用于以分页格式显示内容。分页器的属性列举如下。
语法:
<p-paginator></p-paginator>
Paginator Properties:
- totalRecords。它是要显示的总记录页的总数。它是数字数据类型，默认值为0。
- rows。它是每页要显示的数据数。它是数字数据类型，默认值是0。
- first: 它是要显示的第一行的零相对数。它是数字数据类型，默认值是0。
- pageLinkSize。它设置要显示的页面链接的数量。它是数字数据类型，默认值是5。
- rowsPerPageOptions。它是整数/对象值的数组，用于显示在每页下拉的行中。它是数组数据类型，默认值为空。
- style。它是组件的内联样式。它是字符串数据类型，默认值为空。
- styleClass。它是组件的风格类。它是字符串数据类型，默认值为空。
- alwaysShow。它指定了是否在只有一个页面的情况下也要显示它。它是一个布尔数据类型，默认值为真。
- showFirstLastIcon：它显示了分页器上显示的图标，以进入第一页和最后一页。它是一个布尔数据类型，默认值为真。
- templateLeft：它是注入分页器左侧的模板实例。它是TemplateRef数据类型，默认值为空。
- templateRight：它是注入分页器右侧的模板实例。它是TemplateRef数据类型，默认值为空。
- dropdownItemTemplate。它是注入到分页器内的下拉项的模板实例。它是TemplateRef数据类型，默认值为空。
- dropdownAppendTo。它是用于附加下拉式覆盖的目标元素。它可以接受任何类型的数据，默认值为空。
- dropdownScrollHeight：它是视口的下拉高度，单位是像素，如果列表的高度超过这个值，就会定义一个滚动条。它是字符串数据类型，默认值是200px。
- currentPageReportTemplate。它是当前页报告元素的模板。它是字符串数据类型，默认值是（{currentPage} of {totalPages}）。
- showCurrentPageReport:它指定是否显示当前页的报告。它是布尔数据类型，默认值是false。
- showJumpToPageDropdown。它指定是否显示一个下拉菜单以导航到任何页面。它是布尔数据类型，默认值是false。
- showPageLinks。它指定是否显示页面链接。它是一个布尔数据类型，默认值是true。
Events: - onPageChange。它是一个回调，当元素中的页面发生变化时被触发。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：它将看起来像如下。
Project Structure
示例1：在下面的代码中，我们将使用上述属性来演示分页器属性的使用。
- app.component.html:
<div style="text-align:center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>Angular PrimeNG Paginator Properties</h4>
<p-paginator [rows]="5" [totalRecords]="10"></p-paginator>
</div>
- app.component.ts:
import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.primengConfig.ripple = true;
}
}
- app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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 { }
输出:
示例2：在下面的代码中，我们将使用上述属性来演示分页器属性的使用。
- app.component.html:
<div style="text-align:center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>Angular PrimeNG Paginator Properties</h4>
<p-paginator [rows]="5" [totalRecords]="10"
showCurrentPageReport="true"
alwaysShow="true"
showFirstLastIcon="true"
showJumpToPageDropdown="true">
</p-paginator>
</div>
- app.component.ts:
import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.primengConfig.ripple = true;
}
}
- app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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 { }
输出:
