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ụngPaginationModulePaginationConfig.

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.