如何在 Angular 4 中创建分页组件? [英] How can I create a pagination component in Angular 4?

问题描述

我有一个像 /list/students?page=5&rows=10 这样的 API 端点，带有分页参数 page 和 size.我想创建一个angular2分页组件.

输入参数为

• 页面
• 尺寸

此外，我想使用箭头按钮转到特定页面和大小.

如何实现这个组件?

解决方案

您可以使用我下面的代码和服务创建分页组件

<块引用><块引用>

app.component.html

<块引用><块引用>

app.component.ts 在下面；

import {Component} from '@angular/core';@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls : ['./app.component.css']})导出类 AppComponent {分页 = {TotalItems: 100,当前页数:1,页面大小:10，页面链接按钮总数:5，RowsPerPageOptions: [10, 20, 30, 50, 100]};/* 分页组件方法 */我的变化(事件){this.pagination.CurrentPage = event.currentPage;this.pagination.TotalItems = event.totalItems;this.pagination.PageSize = event.pageSize;this.pagination.TotalPageLinkBut​​tons = event.totalPageLinkBut​​tons;}}

<块引用><块引用>

app.component.module

从'@angular/platform-b​​rowser'导入{BrowserModule}；从@angular/core"导入 {NgModule}；从@angular/forms"导入{FormsModule}；从 '@angular/http' 导入 {HttpModule}；从 './app.component' 导入 {AppComponent}；从'./components/paging-component/paging-component.component'导入{PagingComponent}；从'./service/paging-service.service'导入{PagingService}；@NgModule({声明: [应用组件，分页组件],进口:[浏览器模块，表单模块，Http模块],提供者:[PagingService]，引导程序:[AppComponent]})导出类 AppModule { }

<块引用><块引用>

paging-service.service.ts 是

import { Injectable } from '@angular/core';@Injectable()导出类 PagingService {/*** @param totalItems : 要列出的总项目* @param currentPage : 当前页码(页数从 1 开始，而不是 0)* @param pageSize : 页面中的项目数* @param totalPageLinkBut​​tons : 页面链接按钮总数* @returns {{* 起始页:编号，* endPage:编号，* 开始索引:数字，* 结束索引:数字，* totalPageLinkBut​​tons:数量，* totalItems:数量，* 当前页:编号，* pageSize:数字，* 总页数:数量，* 页数:(可观察的<数量>|任何)* }}*/getPagingServiceItems(totalItems: number, currentPage: number = 1, pageSize: number = 10, totalPageLinkBut​​tons: number = 5) {totalItems = totalItems ||1;/* 如果 currentPage 不存在，则默认值为 '1' */currentPage = currentPage ||1;/* 如果不存在，则页面中项目数的默认值为10 */pageSize = pageSize ||10;/* 如果不存在，则页面链接按钮总数的默认值为 10 */totalPageLinkBut​​tons = totalPageLinkBut​​tons ||10;/* 计算总页数 */const totalPages = Math.ceil(totalItems/pageSize);让起始页:编号；//开始页面按钮编号让 endPage:数字；//结束页面按钮编号如果(totalPages <= totalPageLinkBut​​tons){//小于 totalPageButtons 则显示全部//1,2,3,.., totalPages 是按钮起始页 = 1;endPage = 总页数；} 别的 {//多于 totalPageButtons 然后计算起始页和结束页//currentPage 将位于分页的中心if (currentPage <= Math.ceil(totalPageLinkBut​​tons/2)) {起始页 = 1;endPage = totalPageLinkBut​​tons;} else if (currentPage + Math.ceil(totalPageLinkBut​​tons/2) > totalPages) {startPage = totalPages - totalPageLinkBut​​tons + 1;endPage = 总页数；} 别的 {startPage = currentPage - Math.ceil(totalPageLinkBut​​tons/2) + 1;endPage = startPage + totalPageLinkBut​​tons - 1;}}//计算开始和结束项索引//索引从 0 开始！这很重要const startIndex = (currentPage - 1) * pageSize;const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);const 页面 = [];//在 pager 控件中创建一个页面数组以进行 ng-repeatfor ( let i = startPage; i <= endPage ; i++) {pages.push(i);}//返回具有视图所需的所有分页属性的对象返回 {起始页:起始页，结束页:结束页，开始索引:开始索引，结束索引:结束索引，totalPageLinkBut​​tons: totalPageLinkBut​​tons,totalItems : totalItems,当前页:当前页，页面大小:页面大小，总页数:总页数，页数:页数};}}

I have a API endpoint like /list/students?page=5&rows=10 with a pagination parameters page and size. I want to create a angular2 pagination component.

Input parameters will be

• page
• size

In addition, I want to go to specific page and size with arrow buttons.

How can I implement this component ?

解决方案

You can crate a paging component using my below codes and services

app.component.html

<paging-component
  [TotalItems]="pagination.TotalItems"
  [CurrentPage]="pagination.CurrentPage"
  [PageSize]="pagination.PageSize"
  [TotalPageLinkButtons]="pagination.TotalPageLinkButtons"
  [RowsPerPageOptions]="pagination.RowsPerPageOptions"
  (onPageChange)="myChanges($event)"></paging-component>

app.component.ts is below;

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

@Component({
  selector   : 'app-root',
  templateUrl: './app.component.html',
  styleUrls  : ['./app.component.css']
})
export class AppComponent {

  pagination = {
    TotalItems: 100,
    CurrentPage: 1,
    PageSize: 10,
    TotalPageLinkButtons: 5,
    RowsPerPageOptions: [10, 20, 30, 50, 100]
  };

  /* Paging Component metod */
  myChanges(event) {
    this.pagination.CurrentPage = event.currentPage;
    this.pagination.TotalItems = event.totalItems;
    this.pagination.PageSize = event.pageSize;
    this.pagination.TotalPageLinkButtons = event.totalPageLinkButtons;
  }
}

app.component.module

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component';
import {PagingComponent} from './components/paging-component/paging-component.component';
import {PagingService} from './service/paging-service.service';

@NgModule({
  declarations: [
    AppComponent,
    PagingComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [ PagingService],
  bootstrap: [AppComponent]
})
export class AppModule { }

paging-service.service.ts is

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

@Injectable()
export class PagingService {


  /**
   * @param totalItems : Total items to be listed
   * @param currentPage : Current page number ( Pages starting from 1 not 0)
   * @param pageSize : The number of items in the page
   * @param totalPageLinkButtons : The number of total page link buttons
   * @returns {{
   * startPage: number,
   * endPage: number,
   * startIndex: number,
   * endIndex: number,
   * totalPageLinkButtons: number,
   * totalItems: number,
   * currentPage: number,
   * pageSize: number,
   * totalPages: number,
   * pages: (Observable<number>|any)
   * }}
   */
  getPagingServiceItems(totalItems: number, currentPage: number = 1, pageSize: number = 10, totalPageLinkButtons: number = 5) {

    totalItems = totalItems || 1;

    /* if currentPage not exists default value will be '1' */
    currentPage = currentPage || 1;

    /* The default value of the number of items in the page is 10 if not exist */
    pageSize = pageSize || 10;

    /* The default value of the number of total page link buttons is 10 if not exist */
    totalPageLinkButtons = totalPageLinkButtons || 10;

    /* calculate total pages  */
    const totalPages = Math.ceil(totalItems / pageSize);


    let startPage: number; // start Page Button number
    let endPage: number;   // end Page Button number

    if (totalPages <= totalPageLinkButtons) {

      // less than totalPageButtons then show all
      // 1,2,3,.., totalPages are buttons
      startPage = 1;
      endPage = totalPages;
    } else {
      // more than totalPageButtons then calculate start and end pages
      // currentPage will be on the center of the paging

      if (currentPage <= Math.ceil(totalPageLinkButtons / 2)) {
        startPage = 1;
        endPage = totalPageLinkButtons;
      } else if (currentPage + Math.ceil(totalPageLinkButtons / 2) > totalPages) {
        startPage = totalPages - totalPageLinkButtons + 1;
        endPage = totalPages;
      } else {
        startPage = currentPage - Math.ceil(totalPageLinkButtons / 2) + 1;
        endPage = startPage + totalPageLinkButtons - 1;
      }
    }

    // calculate start and end item indexes
    // Indexes are started from 0 ! It is important

    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    const pages = [];
    // create an array of pages to ng-repeat in the pager control
    for ( let i = startPage; i <= endPage ; i++) {
      pages.push(i);
    }

    // return object with all paging properties required by the view
    return {
      startPage           : startPage,
      endPage             : endPage,
      startIndex          : startIndex,
      endIndex            : endIndex,
      totalPageLinkButtons: totalPageLinkButtons,
      totalItems          : totalItems,
      currentPage         : currentPage,
      pageSize            : pageSize,
      totalPages          : totalPages,
      pages               : pages
    };
  }


}

这篇关于如何在 Angular 4 中创建分页组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！