Angular ng Bootstrap 分页组件

介绍

Angular ng Bootstrap 分页组件是一个基于BootStrap的Paging组件，用于在Angular应用程序中生成美观且易于使用的分页控件。

特点

• 基于BootStrap，易于自定义主题
• 完全可定制和响应式
• 可以与任何数据源集成

使用

安装

安装ng-bootstrap和Bootstrap：

npm install --save @ng-bootstrap/ng-bootstrap bootstrap

导入模块

在您的模块文件中导入NgBootstrapModule：

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule],
  ...
})
export class AppModule { }

在组件中使用分页器

<ngb-pagination [collectionSize]="items.length" [(page)]="currentPage" [pageSize]="pageSize"></ngb-pagination>

<ul>
  <li *ngFor="let item of pagedItems">{{ item }}</li>
</ul>

在组件中读取数据

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

@Component({
  selector: 'app-root',
  template: `
    <ngb-pagination [collectionSize]="items.length" [(page)]="currentPage" [pageSize]="pageSize"></ngb-pagination>

    <ul>
      <li *ngFor="let item of pagedItems">{{ item }}</li>
    </ul>
  `
})
export class AppComponent {
  items = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'];
  currentPage = 1;
  pageSize = 3;

  get pagedItems() {
    const startIndex = (this.currentPage - 1) * this.pageSize;
    return this.items.slice(startIndex, startIndex + this.pageSize);
  }
}

自定义

ng Bootstrap 分页组件可以通过自定义Bootstrap样式表来自定义。要自定义组件的样式，请覆盖Bootstrap类。

例如：

// Override default pagination styles
.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.page-item {
  padding: 5px 10px;

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  &.active {
    background-color: $secondary !important;
    border-color: $secondary !important;

    a {
      color: white !important;
    }
  }
}

.page-link {
  color: $primary;
}

总结

Angular ng Bootstrap 分页组件是非常有用的组件，它允许您创建美观且易于使用的分页器来显示您的数据。它非常易于使用，并且具有很多定制选项，因此您可以轻松地将其集成到任何Angular项目中。