Angular ngx-bootstrap 分页组件

在 Angular 开发过程中，经常需要使用到分页功能来管理数据展示。ngx-bootstrap 是一系列组件、指令和服务的合集，提供了一个基础的 UI 框架，其中包括了带有分页功能的分页组件。

安装

使用以下命令来安装 ngx-bootstrap 分页组件：

npm install ngx-bootstrap --save

同时，在 app.module.ts 文件中导入 PaginationModule 模块：

import { PaginationModule } from 'ngx-bootstrap/pagination';

@NgModule({
  imports: [PaginationModule.forRoot(), ...],
  ...
})

使用

在 HTML 页面中，我们可以像下面这样来使用分页组件：

<div id="main-container">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let item of items">
      {{ item }}
    </li>
  </ul>
  <pagination [(ngModel)]="currentPage" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [maxSize]="maxSize"></pagination>
</div>

在组件类中，我们需要定义一些属性来控制分页的显示和行为。例如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-pagination-demo',
  templateUrl: './pagination-demo.component.html'
})
export class PaginationDemoComponent {
  totalItems = 64;
  currentPage = 4;
  itemsPerPage = 10;
  maxSize = 5;

  constructor() {}

  onPageChanged(event: any): void {
    console.log('Page changed to: ', event.page);
    console.log('Number items per page: ', event.itemsPerPage);
  }
}

再次运行应用程序并访问分页功能，并点击不同的分页按钮，你就能看到输出：

Page changed to: 2
Number items per page: 10

属性

ngx-bootstrap 分页组件提供了许多属性来帮助我们自定义分页的行为和外观。常用的属性包括：

• [(ngModel)]：当前选中的页码。在组件类中也可以使用 pageChanged 事件回调替代双向数据绑定。
• totalItems：总数据条数。
• itemsPerPage：每页展示的数据条数。
• maxSize：最大显示的页码数量。
• rotate：是否旋转页码按钮。
• boundaryLinks：是否显示首页和尾页按钮。
• directionLinks：是否显示前一页和后一页按钮。

参考资料

• ngx-bootstrap Pagination