Ngx-Bootstrap - Phân trang

Thành phần phân trang ngx-bootstrap cung cấp các liên kết phân trang hoặc thành phần phân trang cho trang web hoặc thành phần của bạn.

PaginationComponent

bộ chọn

pagination

Đầu vào

align - boolean, nếu true sẽ căn chỉnh mỗi liên kết ở các bên của máy nhắn tin
boundaryLinks - boolean, nếu sai nút đầu tiên và nút cuối cùng sẽ bị ẩn
customFirstTemplate - TemplateRef <PaginationLinkContext>, mẫu tùy chỉnh cho liên kết đầu tiên
customLastTemplate - TemplateRef <PaginationLinkContext>, mẫu tùy chỉnh cho liên kết cuối cùng
customNextTemplate - TemplateRef <PaginationLinkContext>, mẫu tùy chỉnh cho liên kết tiếp theo
customPageTemplate - TemplateRef <PaginationLinkContext>, mẫu tùy chỉnh cho liên kết trang
customPreviousTemplate - TemplateRef <PaginationLinkContext>, mẫu tùy chỉnh cho liên kết trước đó
directionLinks - boolean, nếu sai các nút trước và sau sẽ bị ẩn
disabled - boolean, nếu thành phần phân trang đúng sẽ bị vô hiệu hóa
firstText - boolean, văn bản nút đầu tiên
itemsPerPage- số lượng, số lượng mục tối đa trên mỗi trang. Nếu giá trị nhỏ hơn 1 sẽ hiển thị tất cả các mục trên một trang
lastText - chuỗi, văn bản nút cuối cùng
maxSize - số lượng, số lượng giới hạn cho các liên kết trang trong máy nhắn tin
nextText - chuỗi, văn bản nút tiếp theo
pageBtnClass - chuỗi, thêm lớp vào <li>
previousText - chuỗi, văn bản nút trước đó
rotate - boolean, nếu true, trang hiện tại sẽ ở giữa danh sách các trang
totalItems - số lượng, tổng số mục trong tất cả các trang

Kết quả đầu ra

numPages - được kích hoạt khi tổng số trang thay đổi, $ event: number bằng tổng số trang.
pageChanged - được kích hoạt khi trang được thay đổi, $ event: {page, itemsPerPage} bằng đối tượng có chỉ mục trang hiện tại và số lượng mục trên mỗi trang.

Thí dụ

Vì chúng ta sẽ sử dụng phân trang, chúng ta phải cập nhật app.module.ts được sử dụng trong chương Phương thức ngx-bootstrap để sử dụngPaginationModule và PaginationConfig.

Cập nhật app.module.ts để sử dụng PaginationModule và PaginationConfig.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
import { PaginationModule,PaginationConfig } from 'ngx-bootstrap/pagination';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Cập nhật test.component.html để sử dụng phương thức.

test.component.html

<div class="row">
   <div class="col-xs-12 col-12">
      <div class="content-wrapper">
         <p class="content-item" *ngFor="let content of returnedArray">{{content}}</p>
      </div>
      <pagination [boundaryLinks]="showBoundaryLinks" 
         [directionLinks]="showDirectionLinks" 
         [totalItems]="contentArray.length"
         [itemsPerPage]="5"
         (pageChanged)="pageChanged($event)"></pagination>
   </div>
</div>
<div>
   <div class="checkbox">
      <label><input type="checkbox" [(ngModel)]="showBoundaryLinks">Show Boundary Links</label>
      <br/>
      <label><input type="checkbox" [(ngModel)]="showDirectionLinks">Show Direction Links</label>
   </div>
</div>

Cập nhật test.component.ts cho các biến và phương thức tương ứng.

test.component.ts

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { PageChangedEvent } from 'ngx-bootstrap/pagination';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   contentArray: string[] = new Array(50).fill('');
   returnedArray: string[];
   showBoundaryLinks: boolean = true;
   showDirectionLinks: boolean = true;
   constructor() {}

   pageChanged(event: PageChangedEvent): void {
      const startItem = (event.page - 1) * event.itemsPerPage;
      const endItem = event.page * event.itemsPerPage;
      this.returnedArray = this.contentArray.slice(startItem, endItem);
   }
   ngOnInit(): void {
      this.contentArray = this.contentArray.map((v: string, i: number) => {
         return 'Line '+ (i + 1);
      });
      this.returnedArray = this.contentArray.slice(0, 5);
   }
}

Xây dựng và Phục vụ

Chạy lệnh sau để khởi động máy chủ góc.

ng serve

Sau khi máy chủ hoạt động. Mở http: // localhost: 4200. Nhấp vào nút Mở phương thức và xác minh kết quả sau.