Angular 自定义分页组件，自定义每页显示个数

后端返回列表是全部数据，分页前端做的，自定义分页组件实现前端分页，下图为分页效果：

1.创建page.component.html

    

        

            首页
        
        

        
            «
            Previous
        
        

        

            {{item==0?'...':item}}
        

        

        
            »
            Next
        
        
        

          尾页
        

        

            每页显示
            条
        
        

            确定
        
    

2.创建page.component.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ["./page.component.css"]
})

export class PageComponent implements OnInit {

  @Input() pageData: any[] = [];//分页的列表数据
  @Input() pageItemCount: number = 15;//每页显示的个数，默认15，可自定义
  @Input() pageNumber : number = 1;//页码
  @Input() isHiddenItemCount:boolean;//是否显示自定义页数
  @Output() onChangePage: EventEmitter = new EventEmitter;
  @Output() onChangePageItemCount : EventEmitter = new EventEmitter;

  pageTotal: number = 1;
  pageSum: number = 10; //navigation total number
  currentPageItem: number;

  constructor() {
  }

  ngOnInit() {
    if (this.pageItemCount < 0) {
      this.pageItemCount = 1;
    }

    if (!Array.isArray(this.pageData)) {
      this.pageData = [];
    }

    if(!this.isHiddenItemCount){
      this.isHiddenItemCount = false;
    }
  }

  page() {//设置分页
    this.pageTotal = Math.ceil(this.pageData.length / this.pageItemCount);
    let halfPageSum = Math.floor(this.pageSum >> 1);

    let pageItems = [];
    for (let i = 0; i < this.pageTotal; i++) {
      pageItems[i] = i + 1;
    }

    if (this.pageTotal > this.pageSum) {
      if (this.pageNumber <= halfPageSum) { // Left
        pageItems = pageItems.slice(0, this.pageSum);
      } else if (this.pageNumber > this.pageTotal - halfPageSum) { // Right
        pageItems = pageItems.slice(this.pageTotal - this.pageSum, this.pageTotal);
        pageItems[0] = 0;
      } else { // Middle
        let start = this.pageNumber - halfPageSum;
        pageItems = pageItems.slice(start, start + this.pageSum - 2);
        pageItems.unshift(0);
        pageItems.push(0);
      }
    }

    return pageItems;
  }

  goPage(pageNumber: number) {//进入某一页
    if (pageNumber > 0) {
      this.pageNumber = pageNumber;
      this.onChangePage.emit(this.pageNumber);
    }
  }

  setPageItem(){//确定
    this.onChangePageItemCount.emit(this.currentPageItem);
  }

  pageItemChange(event){//自定义每页显示数据
    this.currentPageItem = event.target.value;
  }
}

3.在列表组件中的使用

html:

          

            

              
                #{{i+1+(pageNumber-1)*pageItemCount}}
                Service Id: {{service.serviceId}}
                {{service.shortServiceName}}
              
            
          
        
      

ts:

import { Component, OnDestroy, OnInit } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";

export class SLTComponent {
  pageNumber: number = 1;//默认第一页
  pageItemCount: number = 15;//每页显示个数，默认15，可自定义

  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {}

  ngOnInit(): void {
     //获取分页参数
    this.pageNumber = this.route.snapshot.queryParams["pageNumber"]
      ? this.route.snapshot.queryParams["pageNumber"]
      : 1;
    this.pageItemCount = this.route.snapshot.queryParams["pageItemCount"]
      ? this.route.snapshot.queryParams["pageItemCount"]
      : 15;

     //获取数据列表
     ......
  }

  goPage(pageNumber: number) {//进入某一页
    this.pageNumber = pageNumber;
    this.router
      .navigate(["web/slt"], {
        queryParams: {
          pageNumber: pageNumber,
          pageItemCount: this.pageItemCount
        }
      })
      .catch();
  }

  setPageItem(pageItemCount: number) {//设置每页显示的个数，查询加载数据
    this.pageItemCount = pageItemCount;
    this.pageNumber = 1;
    this.router
      .navigate(["web/slt"], {
        queryParams: { pageNumber: 1, pageItemCount: this.pageItemCount }
      })
      .catch();
  }


}

4.css样式就不展示了，欢迎评论交流