Angular中Bootstrap分页当前页变色及首末页翻页按钮禁用实现

1. 调整HTML模板绑定 #

对原有模板做以下修改：

• 翻页按钮绑定disabled类：第一页时给Previous的li加disabled类，最后一页时给Next的li加disabled类，同时给点击事件加前置判断，禁用状态下不触发翻页逻辑
• 页码项绑定active类：当前索引等于页码索引时给对应li加active类，标记当前页
• 调整sr-only的current标记：仅当前页显示该辅助文本

修改后的完整HTML代码：

<ul *ngIf="(ticket$| async)?.length != 0" class="pagination justify-content-end">
  <!-- Previous按钮：第一页时禁用 -->
  <li class="page-item" [class.disabled]="tabindex === 0">
    <a 
      class="page-link" 
      (click)="tabindex > 0 && previousIndex()"
    >
      Previous<span aria-hidden="true">&laquo;</span>
    </a>
  </li>
  <!-- 页码项：匹配当前页时加active类 -->
  <li 
    *ngFor="let i of getArrayFromNumber((ticket$| async)?.length); let in = index" 
    class="page-item"
    [class.active]="in === tabindex"
  >
    <a 
      class="page-link" 
      (click)="updateIndex(in)"
    >
      {{in+1}}
      <span *ngIf="in === tabindex" class="sr-only">(current)</span>
    </a>
  </li>
  <!-- Next按钮：最后一页时禁用 -->
  <li class="page-item" [class.disabled]="tabindex === max - 1">
    <a 
      class="page-link" 
      (click)="tabindex < max - 1 && nextIndex()"
    >
      Next
    </a>
  </li>
</ul>

2. 补全TS逻辑 #

原有代码存在两个核心问题需要修复：

• 点击页码时未同步tabindex，导致当前页标记、翻页禁用状态完全失效
• 未提前声明类成员初始值，异步数据加载时会出现未定义报错

修改后的完整TS代码：

// 提前声明类成员初始值，避免未定义报错
tabindex = 0; // 当前页码索引，默认第一页
max = 0; // 总页数
startIndex = 0;
endIndex = 7;

getArrayFromNumber(length) {
  this.max = Math.ceil(length / 7);
  return new Array(this.max);
}

updateIndex(pageIndex) {
  // 核心补充：同步更新当前页索引tabindex
  this.tabindex = pageIndex;
  this.startIndex = pageIndex * 7;
  this.endIndex = this.startIndex + 7;
}

previousIndex() {
  if (this.tabindex > 0) {
    this.tabindex -= 1
  }
  this.startIndex = this.tabindex * 7;
  this.endIndex = this.startIndex + 7;
}

nextIndex() {
  if (this.tabindex < this.max - 1) {
    this.tabindex += 1
  }
  this.startIndex = this.tabindex * 7;
  this.endIndex = this.startIndex + 7;
}

3. 自定义当前页按钮颜色（可选） #

Bootstrap默认的active页为深蓝色，如需修改颜色，在全局或组件样式中覆盖默认样式即可：

/* 替换为你需要的颜色值 */
.page-item.active .page-link {
  background-color: #你的主色值;
  border-color: #你的主色值;
  /* 可选：修改hover状态的样式 */
  &:hover {
    background-color: #你的主色hover值;
    border-color: #你的主色hover值;
  }
}

注：Bootstrap自带的page-item.disabled类已经实现了参考的禁用样式（灰色背景、禁用光标、不可点击效果），无需额外编写禁用样式。

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