Angular自定义分页组件如何按条件禁用上一页/下一页按钮

核心问题梳理 #

• 你的页码索引是从0开始计数（显示时做了+1处理），原有判断逻辑没有对应索引规则，存在偏差
• 上一页、下一页的禁用条件相互独立，共用同一个isDisabled变量无法分别控制两个按钮状态
• Angular中控制按钮禁用需要使用[disabled]属性绑定，而非ngIf（ngIf是控制元素是否渲染，不是禁用）

修改方案 #

方案1：直接在模板内绑定判断（最简单，适合简单场景） #

直接修改你的分页组件模板代码即可：

<div class="btn-group" role="group" aria-label="pagination buttons">
  <button 
    mat-icon-button 
    class="vorige-icon" 
    aria-label="vorige icon" 
    (click)="onPrevious()"
    [disabled]="currentPage === 0"
  >
    <mat-icon>chevron_left</mat-icon>
  </button>
  <span>{{currentPage + 1}} / {{totalPages}}</span>
  <button 
    mat-icon-button 
    class="volgende-icon" 
    aria-label="volgende icon" 
    (click)="onNext()"
    [disabled]="currentPage === totalPages - 1"
  >
    <mat-icon>chevron_right</mat-icon>
  </button>
</div>

注意：模板中不需要加this.前缀，Angular会自动从组件实例中读取对应属性

方案2：封装为组件类的Getter（逻辑更清晰，适合后续扩展） #

在组件类中添加两个Getter属性：

// 上一页是否禁用
get isPrevDisabled(): boolean {
  return this.currentPage === 0;
}

// 下一页是否禁用
get isNextDisabled(): boolean {
  return this.currentPage === this.totalPages - 1;
}

模板中对应绑定即可：

<button 
  mat-icon-button 
  class="vorige-icon" 
  aria-label="vorige icon" 
  (click)="onPrevious()"
  [disabled]="isPrevDisabled"
>
<!-- 其余代码不变 -->
<button 
  mat-icon-button 
  class="volgende-icon" 
  aria-label="volgende icon" 
  (click)="onNext()"
  [disabled]="isNextDisabled"
>

额外说明 #

不需要额外编写checkDisabled这类手动检查的方法，Angular的变更检测机制会在currentPage、totalPages更新时自动更新绑定的禁用状态，只要你的翻页方法onPrevious、onNext中正确修改了currentPage的值即可。

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