如何根据布尔值条件禁用PrimeNG p-table分页器下一页按钮

现有代码与需求 #

需求：指定布尔值为false时，禁用p-table分页器的下一页按钮；布尔值为true时按钮正常显示可用。
当前使用的p-table代码：

<p-table #dt id="{{id}}_table" [(value)]="_datasrc" [columns]="cols" [rows]="rowNumber || 10"
         [paginator]="paginator" [pageLinks]="1" ...

最初编写的固定隐藏下一页按钮的CSS：

::ng-deep 
     .ui-paginator-next {
        visibility: hidden;
    }

遇到的问题：直接在p-table标签上使用ngClass无法作用到组件内部的分页器元素，裸写::ng-deep会导致样式全局生效，无法按条件触发。

实现方案 #

• 方案1：限定::ng-deep生效范围，配合宿主动态类实现条件样式
  不要写无前置选择器的::ng-deep，先给p-table绑定动态类，再通过:host + ::ng-deep组合选择器，把样式生效范围限定在当前组件、且p-table带有指定类的场景下：
  1. 给p-table添加动态类绑定，假设控制逻辑的布尔变量名为shouldDisableNext：

  <p-table #dt id="{{id}}_table" [(value)]="_datasrc" [columns]="cols" [rows]="rowNumber || 10"
           [paginator]="paginator" [pageLinks]="1"
           [ngClass]="{'disable-next-btn': shouldDisableNext}"
           ...>
  

  2. 调整原有CSS，增加前置限定范围，加上:host避免样式泄露到其他组件：

  :host ::ng-deep .disable-next-btn .ui-paginator-next {
    /* 如果需要隐藏按钮用这个 */
    /* visibility: hidden; */
    /* 如果需要禁用按钮推荐用这个，交互更友好 */
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
  }
  

• 方案2：使用p-table自带的分页器自定义模板（推荐，无样式穿透问题）
  PrimeNG p-table支持通过模板替换默认分页器元素，可以直接绑定按钮的disabled属性，不需要依赖样式穿透，逻辑更稳定：

  <p-table #dt id="{{id}}_table" [(value)]="_datasrc" [columns]="cols" [rows]="rowNumber || 10"
           [paginator]="paginator" [pageLinks]="1"
           [totalRecords]="totalDataCount"
           ...>
    <!-- 自定义下一页按钮 -->
    <ng-template pTemplate="paginatornext" let-paginationState>
      <button 
        type="button" 
        class="ui-paginator-next ui-state-default ui-corner-all"
        [disabled]="shouldDisableNext || paginationState.page === paginationState.pageCount - 1"
        (click)="dt.changePage(paginationState.page + 1)">
        <span class="ui-paginator-icon pi pi-angle-right"></span>
      </button>
    </ng-template>
    <!-- 其余表格列、内容模板正常写 -->
  </p-table>
  

  该方案可以同时兼容分页到最后一页时的自动禁用逻辑，不需要额外处理原生分页状态。

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