如何自定义<pagination-controls>可见性

Question

我正在使用此“ https://www.npmjs.com/package/ngx-pagination”进行分页。

工作代码： https://stackblitz.com/edit/angular-e1f9hq。

这里我要删除文本“ 上一个”和“ 最后一个”“ ”。

我只想保留箭头图标。而且所选的页码框颜色也要更改。 但我没有得到如何改变这一点。 谁能帮我。

Answer 1

要删除这些内容，只需在您的分页控件中添加 previousLabel =“” 和 nextLabel =“” ，

<pagination-controls (pageChange)="p = $event"
    previousLabel=""
    nextLabel=""
    ></pagination-controls>

因此您 app.component.html 将是：

<div class="text-center">
  <h1>ngx-pagination live demo</h1>
  <h4><small><a href="https://github.com/michaelbromley/ngx-pagination">GitHub Repo</a></small></h4>
  <p>A bare-bones demo for your experimenting / bug-reproducing pleasure.</p>
</div>
<div class="list">
  <ul>
    <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }">{{ item }}</li>
  </ul>

  <pagination-controls (pageChange)="p = $event" previousLabel="" nextLabel=""></pagination-controls>
</div>