Angular16+ng-bootstrap15分页隐藏禁用按钮失效问题求助

问题根源 #

ng-bootstrap15（适配Angular16）对分页组件的DOM结构做了调整：旧版本中禁用的分页项（First/Prev/Last/Next）会直接在<li class="page-item disabled">上添加disabled类，但新版本中，disabled状态仅通过内部<button>元素的disabled属性实现，<li.page-item>不再携带disabled类，导致原CSS规则li.page-item.disabled {display: none;}完全失效。

可行解决方案 #

方案一：纯CSS（推荐，现代浏览器兼容） #

利用CSS的:has()选择器，直接匹配包含禁用按钮的分页项：

/* 隐藏包含禁用按钮的分页项 */
.page-item:has(> button:disabled) {
  display: none;
}

注：:has()选择器已被所有现代浏览器支持，符合Angular16的浏览器兼容要求。

方案二：TS逻辑辅助（兼容旧浏览器） #

通过监听分页变化，手动给禁用项添加自定义类后隐藏：

1. 组件类代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgbPagination } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild(NgbPagination) pagination!: NgbPagination;
  currentPage = 1;
  totalItems = 100;
  pageSize = 10;

  ngAfterViewInit() {
    this.toggleDisabledItems();
    // 监听页码变化，实时更新
    this.pagination.pageChange.subscribe(() => this.toggleDisabledItems());
  }

  private toggleDisabledItems() {
    document.querySelectorAll('.page-item').forEach(item => {
      const btn = item.querySelector('button');
      if (btn?.hasAttribute('disabled')) {
        item.classList.add('hide-disabled');
      } else {
        item.classList.remove('hide-disabled');
      }
    });
  }
}

2. CSS代码：

.page-item.hide-disabled {
  display: none;
}

方案三：自定义分页模板（Angular组件化最佳实践） #

直接通过ng-bootstrap的模板自定义功能，控制禁用按钮的显示：

<ngb-pagination 
  [(page)]="currentPage" 
  [totalItems]="totalItems" 
  [pageSize]="pageSize"
  #pagination
>
  <!-- 自定义First按钮 -->
  <ng-template ngbPaginationFirst let-disabled>
    <button *ngIf="!disabled" class="page-link" (click)="currentPage = 1">First</button>
  </ng-template>
  <!-- 自定义Prev按钮 -->
  <ng-template ngbPaginationPrevious let-disabled>
    <button *ngIf="!disabled" class="page-link" (click)="currentPage--">Prev</button>
  </ng-template>
  <!-- 页码项保持默认 -->
  <!-- 自定义Next按钮 -->
  <ng-template ngbPaginationNext let-disabled>
    <button *ngIf="!disabled" class="page-link" (click)="currentPage++">Next</button>
  </ng-template>
  <!-- 自定义Last按钮 -->
  <ng-template ngbPaginationLast let-disabled>
    <button *ngIf="!disabled" class="page-link" (click)="currentPage = Math.ceil(totalItems/pageSize)">Last</button>
  </ng-template>
</ngb-pagination>

该方案完全通过Angular模板逻辑控制显示，不依赖DOM结构变化，维护性最强。

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