【angular-实践】实现简单分页

.html

  <!-- 菜单栏 -->
  <div class="header-menu">
    <ul nz-menu nzMode="horizontal" nzTheme="dark">
      // 上一页
      <i nz-icon nzType="left" nzTheme="outline" (click)="prePage()"></i>
      
      <ng-container *ngFor="let module of Menus; let i = index; ">
        <li *ngIf="getShowPages(i)" nz-menu-item>
        	{{module.title}}
        </li>
      </ng-container>
      
      // 下一页
      <i nz-icon nzType="right" nzTheme="outline" (click)="nextPage()"></i>
    </ul>
  </div>

.ts

  menuPage: any = {
    curPage: 1,
    total: 10,
    pageSize: 2
  }

  prePage() {
    if (this.menuPage.curPage <= 1) {
      return
    }
    this.menuPage.curPage--
  }

  nextPage() {
    if (this.menuPage.curPage * this.menuPage.pageSize >= this.menuPage.total) {
      return
    }
    this.menuPage.curPage++
  }

  getShowPages(index: number) {
    return (this.menuPage.curPage - 1) * this.menuPage.pageSize < index + 1 &&
      index + 1 < (this.menuPage.curPage) * this.menuPage.pageSize + 1
  }