Question

我在项目中使用了ngx-bootstrap中的分页组件，并尝试更改按钮以及它的外观和失败方式。有办法改变吗？

我的组件：

<div class="table-container">
  <table class="table">
    <thead>
      <tr class="table-nav">
        <th scope="col">שנה</th>
        <th scope="col">סוג הדוח</th>
        <th scope="col">ח.פ</th>
        <th scope="col">שם החברה</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let tax of currentPage">
        <tr>
          <td>{{tax.year}}</td>
          <td>{{tax.type}}</td>
          <td>{{tax.cid}}</td>
          <td>{{tax.company}}</td>
        </tr>
      </ng-container>
    </tbody>
  </table>
  <div class="table-footer">
  <pagination class="pagination" nextText=">" previousText="<" [align]="true" 
    [totalItems]="totalItems" (pageChanged)="pageChanged($event)">
  </pagination>
</div>
</div>

这是默认样式：

我需要使它看起来像这样：

Answer 1

我首先通过在我的分页元素中添加类my-pagination来修复它，

<pagination 
                                    [maxSize]="maxSizeBtn" 
                                    [firstText]="firstText" 
                                    [lastText]="lastText"   
                                    [previousText]="prevText"   
                                    [nextText]="nextText"   
                                    [itemsPerPage]="perPage"
                                    [boundaryLinks]="showBoundaryLinks" 
                                    [totalItems]="totalItems" 
                                    [(ngModel)]="currentPage" 
                                    (pageChanged)="pageChanged($event)" 
                                    (numPages)="smallnumPages = $event" 
                                    id="comp-pagination" 
                                    class="my-pagination" 
                                    ></pagination>

此后，我强制所选的页面项必须具有这样的红色背景色。您将CSS指令放入.css组件文件中

//更改分页背景所选按钮的颜色

.my-pagination::ng-deep .page-item.active .page-link {
    z-index: 1;
    color: #FFFFFF;
    background-color:red !important;
    border-color: #009DA0;
}

别忘了！important指令会覆盖所选页面项目的默认背景颜色

谢谢

ngx-bootstrap：如何更改分页按钮的外观

1 个答案: