Angular中如何限制ngb-pagination显示的最大页码数量？

嘿，这个问题我之前刚处理过！ngb-pagination其实自带了控制显示页码数量的配置项，不用自己写复杂逻辑，几步就能搞定：

核心解决方案：使用maxSize属性 #

ngb-pagination默认会渲染所有页码，你只需要给它加上[maxSize]属性，就能限制最多显示的页码数量（比如5或6）。另外搭配[rotate]="true"属性可以让当前页码尽量居中显示，提升用户体验。

修改后的分页模板代码 #

把你原来的ngb-pagination标签修改成这样：

<div class="col col-sm-6">
    <div class="text-sm-right float-sm-end listjs-pagination">
      <ngb-pagination
        [collectionSize]="clientResults.length"
        [(page)]="page"
        [pageSize]="pageSize"
        [maxSize]="5" <!-- 这里设置最多显示5个页码，改成6就是显示6个 -->
        [rotate]="true" <!-- 可选，让当前页码居中显示 -->
        [ellipses]="true"> <!-- 可选，默认开启，显示省略号代替隐藏的页码 -->
      </ngb-pagination>
    </div>
</div>

额外优化（可选） #

如果想要显示首页和末页的直接跳转按钮，可以加上[boundaryLinks]="true"属性，这样分页栏两端会出现«和»的按钮，方便用户快速跳转到首尾页：

<ngb-pagination
  [collectionSize]="clientResults.length"
  [(page)]="page"
  [pageSize]="pageSize"
  [maxSize]="6"
  [rotate]="true"
  [boundaryLinks]="true">
</ngb-pagination>

组件代码无需修改 #

你原来定义的page和pageSize变量完全不需要改动，保持原样就行：

export class ClientResultComponent implements OnInit {
    public page = 1;
    public pageSize = 30;
    
    // 其他组件逻辑...
}

这样修改之后，分页栏就只会显示你设置的5或6个页码，超出的部分会用省略号代替，完美解决你的问题！

内容的提问来源于stack exchange，提问作者imuzz01