分頁引導當前頁面的顏色 angular

Question

我想改變分頁的顏色當在當前頁面和當你在第一頁或最后一頁時分頁將禁用

像這樣禁用：

應用程序.html

<ul *ngIf="(ticket$| async)?.length != 0" class="pagination justify-content-end">
  <li class="page-item">
    <a class="page-link" (click)="previousIndex()">Previous<span aria-hidden="true">&laquo;</span></a>
  </li>
  <li *ngFor="let i of getArrayFromNumber((ticket$| async)?.length); let in = index" class="page-item">
    <a class="page-link" (click)="updateIndex(in)">{{in+1}}<span class="sr-only">(current)</span></a>
  </li>
  <li class="page-item">
    <a class="page-link" (click)="nextIndex()">Next</a>
  </li>
</ul>

應用程序.ts

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

  updateIndex(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;

  }

Answer 1

在您的 css 文件中添加以下 CSS。 例如，我為當前活動頁面使用了橙色背景顏色，您可以根據需要更改為任何顏色。

.pagination > .active > a , .pagination > .active > a:hover, .pagination > .active > a:focus {
    background-color: orange;
    border-color: orange;
}